这是我参与「第四届青训营 」笔记创作活动的的第2天 我们经常听说过这样的一句话：“文不如表，表不如图”，意思就是相比于文字描述，用表格来描述更加的直观；而相比于表格的描述，图像的描述更加形象。这里的文字、表格、图像都是描述数据的一种方式，如何更好的去把数据的信息表达出来是本文要讲的内容。

什么是数据可视化？

任何可以将数据转换为可视化表示的东西(如图表、图形、地图，有时甚至只是表格)

公元前6200年的人类地图 火狐浏览器上的词云展示

早在很早以前人类就把数据以地图形式来简单表达，现在人类可以用丰富多样的表现形式来可视化数据，例如浏览器的的词云表示。

数据可视化分类

数据可视化可分三类：科学可视化、信息可视化和可视分析

1. 科学可视化：科学实验数据的直观展示
2. 信息可视化：对抽象数据的直观展示
3. 可视分析：对分析结果的直观展现，及交互式反馈，是一个跨邻域的方向

为什么要可视化

数据可视化有很多用途，大体可以分为四类：

1. 记录信息
2. 分析推理
3. 证实假设
4. 交流思想

可视化设计原则和方法

了解可视化设计原则后要会辨别常见的一些错误的可视化表示。

常见的错误可视化

常见的错误可视化可分为：透视失真、图形设计&数据尺度、数据上下文

1. 透视失真

• 如果数字是由视觉元素表示的，那么他们应该与视觉元素的感知程度成正比
• 使用清晰、详细和彻底的标签，以避免图形失真和含糊不清

例如上图显示苹果发布上的手机市场占比饼状图中，给人感受是apple手机的市场份额占比是多余其他手机的，但是实际数据却相反。这是因为这个饼状图是个3D效果显示，从而会有一种近大远小的效果，造成了透视失真。如果是个2D的饼状图，就不出现这种模糊的情况。由此可见即使是苹果公司为了营销也会不择手段。

2. 图形设计&数据尺度

图形的每一部分都会产生对其的视觉预期

• 这些预期往往决定了眼睛实际看到的东西；
• 错误的数据洞察，产生于在图形的某个地方发生的不正确的视觉预期推断。 一个典型的例子：轴刻度，我们期望它从始至终都能够保持连贯且一致。

上面这个图刚开始每一个大刻度表示20，后面的慢慢变换40，这种表示会影响开车人对车速的把控，从而造成不正确的判断。

3. 数据上下文

单独的一个数据很难表达其包含的信息，往往数据要结合在其上下文中才能更好的表达其含义。

上图中左图的图表所表达的意思相比于右图更加直观。

可视化设计原则

一个出色的可视化设计可在最短的时间内，使用最少的空、用最少的笔墨为观众提供最多的信息内涵。

• 准确地展示数据
• 节省笔墨
• 节省空间
• 消除不必要的“无价值”图形
• 在最短时间内传达最多的信息

可视化设计方法

• 最重要的是展现数据
• 合理范围内，最大化数据墨水占比（擦除非数据墨水和擦除冗余的数据墨水）

格式塔理论

格式塔学派的理论核心是整体决定部分的性质，部分依从于整体。结构比元素重要，视觉形象首先作为统一的整体被认知。感知的事物大于眼睛见到的事物。
格式塔理论(Gestalt Laws）较为系统的对人类如何发现图形元素之间的相关性进行了全面总结,被广泛的应用在了视觉设计当中。
格式塔理论的几个原则：

• 就近原则---当视觉元素在空间距离上相距较近时，人们通常倾向于将他们归为一组。将数据元素放在靠近的位置，可以突出它们之间的关联性。
• 相似原则---·形状、大小、颜色、强度等属性方面比较相似时，这些物体就容易被看个整体。
• 连续性原则---人们在观察事物的时候会很自然地沿着物体的边界，将不连续的物体视为连续的整体。
• 闭合原则---有些图形可能本身是不完整或者不闭合的，但主体有一种使其闭合的倾向，人们就会很容易地感知整个物体而忽略未闭合的特征。
• 共势原则---如果一个对象中的一部分都向共同的方向去运动，那这些共同移动的部分就易被感知为一个整体。
• 对称性原则---对称的元素被视为同一组的一部分。
• 图像与背景关系原则---大脑通常认为构图中最小的物体是图形，而更大的物体则是背景。跟凹面元素相比，凸面元素与图形相关联更多些。

基础统计图表

基础统计图表有柱状图(Bar)、饼图(Pie)、算点图(Scatter)、折线图。选择一个合适的图像对数据可视化表示意义重大。

面向前端的可视化工具介绍

• D3---D3.js是用于数据可视化的开源的JavaScript函数库，被认为是最好的JavaScript可视化框架之一。

• Vega---Vega是一种可视化语法。通过其声明式语言，可以用JSON格式描述可视化的视觉外观和交互行为，并使用 Canvas或SVG生成视图。

• G2---一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用Canvas或SVG构建出各种各样的可交互的统计图表。

• ECharts---ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器(IE9/10/11,Chrome，Firefox,Safari等)，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。