这是我参与「第四届青训营 」笔记创作活动的的第15天

课程内容与目标

1. 了解数据可视化的概念和基本原则。
2. 能够识别出不好的，甚至有误导性的可视化呈现。
3. 了解一些面向前端的数据可视化工具。

---

什么是数据可视化

Anything that converts data into a visual representation like charts, graphs, maps, sometimes even just tables.

数据可视化分类

• 科学可视化
  
  科学实验数据的直观展示。
• 信息可视化
  
  对抽象数据的直观表示。
• 可视分析 对分析结果的直观展现及交互式反馈是一个跨领域的方向。

为什么要可视化

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

---

可视化设计原则和方法

可视化设计原则

能够正确地表达数据中的信息而不产生偏差与歧义。

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

常见的错误可视化

1. 透视失真

   • 经常发生在3D 可视化当中，由于引入了空间这种立体的元素会不自觉的产生数据的变形。

   乔布斯在苹果发布会上的 PPT ，3D 的饼图描述不同的智能手机在美国市场的占有率情况，由于透视空间里有近大远小的规则，使得绿色的占比看上去比紫色占比大。

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

2. 图形设计 & 数据尺度
   一个典型的例子：轴刻度，我们期望它从始至终能够保持连贯且一致。 60前每个大数字之间的间隔20，60之后间隔40，如果把100抹去，我们 联想/推断 出来的会是80在抹去的位置上。
   
   图形的每一部分都会产生对其的视觉预期（visual expectation）：

   • 这些预期往往决定了眼睛实际看到的东西。
   • 错误的数据洞察，产生于在图形的某个地方发生的不正确的视觉预期判断。

3. 数据上下文 左图：横轴代表的是年份，纵轴代表的是交通事故当中丧生的人数，在1956年，交警对汽车超速采取了非常严格的管制手段，使得在交通事故当中丧生的人数有了明显下降的趋势，这看上去一点问题都没有，如果我们把数据上下文补全（右图），我们会发现似乎没有这样强相关的结论。

谎言因子

• 控制图形中的谎言因子（Lie Factor , LF）：
  谎言因子：衡量可视化中所表达的数据量与数据之间的夸张程度的度量方法。
  $$LF = 数据所对应的图形元素的相对变化量/数据的真实变化量$$
• 当 LF = 1 时，我们认为图表没有对数据实时进行扭曲，是一个可信的可视化设计。
• 在实际当中，应当确保各部分图形元素的 LF 在[0.95, 1.05]范围内，否则，所产生的图表认为已经丧失了基本可信度。

Data-ink Ratio

• 最大化数据墨水占比（Data-ink Ratio）
• 可视化图形由墨水和空白区域构成
• 数据墨水：可视化图形当中不可擦除的核心部分被称之为“数据墨水”
• 擦除数据墨水将减少图形所传达的信息量
• 数据墨水占比：可视化图形中用于展示核心数据的“墨水”在整体可视化所使用的墨水中的比例

Data-ink

高数据墨水占比的图并没有太多的数据表达的损失，但是它看上去更加的清爽，表达的信息更加重点突出。

Data-ink Ratio 案例

横轴生物孕育的时间，纵轴生物的体型。

• 绝大多数墨水都是数据墨水
  • 用于绘制散点和对应标签
• 10% - 20% 的墨水是非数据墨水
  • 用于绘制坐标轴和刻度线
  • 并非所有的非数据墨水都没有用（例如坐标轴信息）。

提高 Data-ink Ratio

• 两个擦除原则：
  • 擦除非数据墨水
  • 擦除冗余的数据墨水
• 非数据墨水
  • 有时，非数据墨水会使数据变得混乱不堪
  • 并非所有的非数据墨水都没有用
• 冗余的数据墨水描述了信息，但它重复显示了信息。

可视化设计方法

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

---

视觉感知

可视化致力于外部认知，也就是说，怎样利用大脑以外的资源来增强大脑本身的认知能力。

引导注意力，高效传达信息：

• 研究表明，人类对于颜色、形状、运动，这些视觉属性，是在不同通道上并行处理的，并且人类能在200ms 以内快速辨别，这些属性被称作具有“预感知”特性。www.csc2.ncsu.edu/faculty/hea…
• 在一个通道中表达的信息，不会干扰在另一个通道上表达的信息，应当使用不同的视觉通道来描画数据不同方面的特征。（例如一个标记的颜色并不会影响）
• 格式塔理论（Gestalt Laws）较为系统的对人类如何发现图形元素之间的相关性进行了全面总结，被广泛的应用在了视觉设计当中。

什么是视觉感知

感知：是指客观事物通过人的感觉器官在人脑中形成的直接反映。
感觉器官：眼、耳、鼻、神经末梢。
视觉感知：客观事物通过人的视觉在人脑中形成的直接反映。

认知过程

认知心理学将认知过程看成由信息的获取、分析、归纳、解码、储存、概念形成、提取和使用等一系列阶段组成的按一定程度进行的信息加工系统。

科学领域中，认知是包含注意力、记忆、产生和理解语言、解决问题，以及进行决策的心理过程的组合。

相对判断和视觉假象

例1：通过视觉方式加快认知过程 一串没有任何规律的数字中找出3出现了几次，我们需要一个一个的去找，这是一个比较耗时的过程；但是我们通过不同颜色的对比，把3突出出来，这样就变得极其的简单。

例2： 有两个方块标记了字母 A 和 B ，看上去 A 方块的颜色更深， B 方块的颜色更浅，其实它们的颜色是一样的，之所以有这样的错觉是因为我们对 A 、 B 两个色块亮度的判断完全是基于周围色块进行的，如果我们把周围色块进行了遮蔽（如下图），看 A 、 B 的颜色变得一致起来。

结论

• 人类视觉系统观察的是变化而不是绝对值也不是绝对准确的值，并且容易被边界吸引。
• 在可视化设计中，设计者需要充分考虑到人类感知系统的这些现象，以使得设计的可视化结果不会存在阻碍或者误导用户的可视化元素。

格式塔理论

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

格式塔理论认为这三幅图是三幅人脸，但在构造主义学派可能会把三幅图拆解成不同的动物，它们并不认为这个整体是人脸。

1. 就近原则（Proximity）

   • 当视觉元素在空间距离上相距较近时，人们通常倾向于将他们归为一组。
   • 将数据元素放在靠近的位置，可以突出它们之间的关联性。

   

2. 相似原则（Similarity）

   • 形状、大小、颜色、强度等属性方面比较相似时，这些物体就容易被看作一个整体。

   

3. 连续性原则（Continuation）

   • 人们在观察物体的时候会很自然地沿着物体的边界，将不连续的物体视为连续的整体。

   

4. 闭合原则（Closure）

   • 有些图形可能本身是不完整或者不闭合的，但主题有一种使其闭合的倾向，人们就会跟容易地感知整个物体而忽略未闭合的特征。

   

5. 共势原则（Common movement）

   • 如果一个对象中的一部分都向共同的方向去运动，那这些共同移动的部分就易被感知为一个整体。

   

6. 对称性原则（Symmetry）

   • 对称的元素被视为同一组的部分。

   

7. 图形与背景关系原则（Figure-ground）

   • 大脑通常认为构图中最小的物体是图形而更大的物体则是背景。
   • 跟凹面元素相比，凸面元素与图形相关联更多些。

   

各种原则构成的一张图：

---

视觉编码

视觉编码是一种将数据信息（属性 + 值）映射成可视化元素（可视化符号 + 视觉通道）的技术。

可视化符号

用于在可视化当中表现数据元素或元素之间的关联。

• 当表示元素时 Mark 包括：点、线、面
• 当表示关系时 Mark 包括：闭包、连线

视觉通道（Channel）

基于数据属性，控制可视化的符号展现样式，例如：点根据其所代表的数据属性的不同可有不同的形状与颜色。

视觉通道有两种类型：

• 数量通道（Magnitude Channel）
  • 用于显示数据的数值属性（定量/定序），包括：位置、长度、角度、面积、深度、色温、饱和度、曲率、体积。
• 标识通道（Identity Channel）
  • 用于显示数据的分类属性（是什么/在哪里），包括：空间区域、色向、动向、形状。

视觉编码的优先级

不同的视觉编码在表达信息的作用和能力上有不同的特性。

• 当利用数量通道编码表示数值属性时：位置通道是最为精确的，其次是长度、角度、面积、深度、色温、饱和度、曲率、最后是体积。
• 当利用标识通道表示分类属性时：划分空间区域最为有效，其后依次是色向、动向、形状。

视觉编码表达案例

例1

大圆的面积是小圆面积的几倍?

例2

长条形的面积是短条形面积的几倍?

条形的面积是更好估计的，对条形比例估计正确的人数是要大于圆形面积估计的。

用刚刚学过的理论来解释，我们在对比条形面积的时候实际上会下意识的去转换成长度的对比而我们对于图形长度的视觉通道认知的准确度是要高于面积的。

基础统计图表

柱状图（Bar）

• 将柱子的高度（或宽度）映射到数值大小
• 最基础的柱形图，需要一个分类变量和一个数值变量
• 柱状图必须以0作为基准线，可以表示正值或负值
• 在柱状图中，柱子可以分组展示
• 柱状图是比较分类的数据的最佳选择

饼图（Pie）

• 每个扇形的弧长（以及圆心角和面积）大小，表示该种类占总体的比例
• 饼图最显著的功能在于表现“占比”
• 饼图一般需要一个分段数据字段、一个连续数据字段
• 分类字段的数据，在图表使用的语境下，应当构成一个整体（例如：一班、二班、三班，构成了整个高一年级），而不能是独立、无关的
• 由于饼图用面积取代了长度，从而加大了对各个数据进行比较的难度，当需要对数据进行比较，分清孰大孰小，尤其是当数据接近时，柱状图更加合适

散点图（Scatter）

• 一般通过点在空间上的位置信息来编码数据
• 点可以根据需要绘制成不同的颜色
• 点既可以时一个圆形，也可以用其它不同形状来替代。形状也是一个重要的视觉通道，用于编码不同数据信息
• 可以通过更复杂的组合图形（glyphs）来编码多维度数据
• 散点图适用于分析变量之间是否存在某种关系或相关性
• 散点图适用于分析变量之间相关性的强弱，我们可以通过查看图上数据点的密度来确定相关性的强弱

折线图

• 大多数情况下，折线图适用于 x 轴为连续数据的场景，但：
  • 也可以在 x 轴为离散数据时使用；
  • 甚至可以用于分类数据时使用，如果分类数据的顺序是有意义的。
  • ⚠以上两种情况在插值计算时要格外注意

离散数据不应该用曲线插值:

选择合适的图表

---

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

D3

D3.js 是用于数据可视化的开源的 JavaScript 函数库,被认为是最好的 JavaScript 可视化框架之一。
简单柱状图示例：
observablehq.com/@d3/bar-cha…
observablehq.com/@thetylerwo…

Vega

Vega 是一种可视化语法。通过其声明式语言，可以用 JSON 格式描述可视化的视觉外观和交互行为并使用 Canvas 或 SVG 生成视图。 简单柱状图示例：vega.github.io/editor/#/ex…

G2

G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2 ，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
简单柱状图示例：g2.antv.vision/zh/examples…

ECharts

ECharts ，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11, Chrome, Firefox, Safari 等），底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
简单柱状图示例：echarts.apache.org/examples/zh…