这是我参与「第四届青训营 」笔记创作活动的的第8天
前言
通过本篇文章你可以了解：
- 了解数据可视化概念和基本原则
- 能够识别出不好的，甚至是有误导性的可视化呈现
- 了解一些面向前端的数据可视化工具
1. 什么是数据可视化
任何一种将数据转换为可视化呈现形式都成为数据可视化，如表格、地图等
生活中的数据可视化
如手机储存饼图、Excel图表、地图、体温计等
数据可视化分类
2. 为什么要数据可视化
为了：
- 记录信息
- 分析推理
- 证实假设
- 交流思想
举例（安斯库姆四重奏） ：通过下图的四组 （x, y）数据，你很难看出它们的 x, y 的均值，方差相同，以及相关系数和线性回归方程也相同。
但通过图的直观显示
3. 可视化设计原则和方法
3.1 可视化原则一
可视化设计的原则之一：
- 能够正确地表达数据中的信息而不产生偏差和歧义
我们先看一些糟糕和错误的可视化呈现
上图的几个图：要不数据太密集，要不颜色搭配不行
汽车的仪表盘刻度不一致（40-60,60-100）；
图表的刻度过小（3.140%-3.142%），让我们以为产生了较大的增幅。
接下来看常见的错误可视化类型：
透视失真
-
如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比
-
使用清晰、详细和彻底的标签，以避免图形失真和含糊不清
图形设计 和 数据尺度
图形的每一部分都会产生对其的视觉预期
- 这些预期往往决定了眼睛实际看到的东西
- 错误的数据洞察，产生在于图形的某个地方发生的不正确的视觉预期推断
- 一个典型的例子：轴刻度，我们期望它从始至终能够保持连贯且一致
数据上下文
我们可以将任何可视化中的图形元素，大致细分为表示数据的元素和不表示数据的元素。前者是诸如散点图中的点，直方图或条形图中的条形，或热图中的阴影区域等元素。后者是诸如绘图的轴，轴刻度和标签，轴标题，图例和绘图注解等元素。这些元素通常为图的数据和/或视觉结构提供上下文。
3.2. 可视化原则二
可视化设计的原则之一：
一个出色的可视化设计可在最短的时间内，使用最少的空间、用最少的笔墨为观众提供最多的信息内涵：
- 准确的展示数据
- 节省笔墨
- 节省空间
- 清楚不必要的 “无价值”图形
- 在最短的时间内传达最多的信息
概念：Data-ink Ratio 最大化数据墨水占比
- 可视化图形由墨水和空白区域构成
- 数据墨水：可视化图形当中不可擦除的核心部分被称之为 “数据墨水”
- 擦除数据墨水将减少图形所传达的信息量
- 数据墨水占比：可视化图形中用于展示核心数据的“墨水”，在整体可视化所使用的墨水中的比例
举例1
举例2
-
绝大多数墨水都是数据墨水：用于绘制赛点和对应标签
-
10%~20% 的墨水是非数据墨水
- 用于绘制坐标轴和刻度线
- 并非所有的非数据墨水都没有用（例如坐标轴信息）
建议：一个常见的建议是减少非数据墨水量，遵循这些建议往往可以减少混乱，并产生更优雅的可视化。同时，背景和视觉结构是重要的，过度缩减提供它们的绘图元素，可能产生难以阅读，令人混淆或根本不引人注目的图形。
4. 视觉感知
可视化致力于外部认知，也就是说，怎样利用大脑之外的资源来增强大脑本身的认知能力
什么是视觉感知
感知：是指客观事物通过人的感觉器官在人脑中形成的直接反映
感觉器官：眼、耳、鼻、神经末梢
视觉感知：就是客观事物通过人的视觉在人脑中形成的直接反映
认知过程
认知心理学将认知过程看成由信息的获取、分析、归纳、解码、储存、概念形成、提取和使用等一系列阶段组成的按一定程序进行的信息加工系统。
科学领域中，认知是包含注意力、记忆、产生和理解语言、解决问题以及进行决策的心理过程的组合。
举例：相对判断和视觉假象
在最短时间内找出 3 的个数
A 和 B 颜色是否一致
结论
- 人类视觉系统观察的是变化，而不是绝对值，并且容易被边界吸引
- 在可视化设计中，设计者需要充分考虑到人类感知系统的这些现象，以使得设计的可视化结果不会存在阻碍或误导用户的可视化元素。
5. 格式塔理论
- 格式塔学派的理论核心是整体决定部分的性质，部分依从于整体。结构比元素重要，视觉形象首先作为统一的整体被认知。感知的事物大于眼睛见到的事物。
- 格式塔理论较为系统的对人类如何发现图形元素之间的相关性进行了全面总结，被广泛的应用在了视觉设计当中。
我们下边的三张图片，通过整体来看，就是三个人脸。
下面来介绍格式塔理论的具体原则，下面这张图片，形象的展示了格式塔的各种原则。
就近原则 （Proximity）
- 当视觉元素在空间距离上相距较近时，人们通常倾向于将他们归为一组。
- 将数据元素放在靠近的位置，可以突出它们之间的关联性。
相似原则 （Simliartity）
- 形状、大小、颜色、强度等属性方面比较相似时，这些物体就容易被看作一个整体
连续性原则 （Continuation）
- 人们在观察物体的时候会很自然地沿着物体的边界，将不连续的物体视为连续的整体
闭合原则 （Closure）
- 有些图形可能本身是不完整或者不闭合的，但总体有一种使其闭合的倾向，人们就会很容易地感知整个物体而忽略未闭合的特征。
共势原则 （Common movement）
- 如果一个对象中的一部分都向共同的方向去运动，那这些共同移动的部分就易被感知为一个整体
对称性原则 （Symmetry）
- 对称的元素被视为同一组的一部分
图形与背景关系原则 （Figure-ground）
- 大脑通常认为构图中最小的物体是图形，而最大的物体则是背景
- 跟凹面元素相比，凸面元素与图形相关联更多些。
6. 视觉编码
数据可视化就是将数据信息映射成可视化元素，而视觉编码会教我们怎么做。
可视化元素
可视化符号 （Mark）
用于在可视化当中表现数据元素或元素之间的关联
-
当表示元素时Mark包括：点、线、面
-
当表示关系时Mark包括：闭包、连线
视觉通道 （Channel）
基于数据属性，控制可视化的符号展示样式。例如，点根据其所代表的数据属性的不同可有不同的形状与颜色。
视觉通道的两种类型：
- 数量通道 （Magnitude Channel）：用于显示数据的数值属性（定量/定序）包括：位置、长度、角度、面积、深度、色温、饱和度、曲率、体积。
- 标识通道 （Identity Channel）：用于显示数据的分类属性（是什么/在哪里）包括：空间区域、色向、动向、形状。
视觉编码的优先级
不同的视觉编码在表达信息的作用和能力上有不同的特性
- 当利用数量通道编码表示数值属性时：位置通道是最为精确的，其次是长度、角度、面积、深度、色温、饱和度、曲率、最后是体积。
- 当利用标识通道表示分类属性时：划分空间区域最为有效，其后依次是色向、动向、形状。
案例
比较两个圆的面积，大的是圆的几倍
比较两个矩形的面积
是不是对矩形的判断最为准确
7. 面向前端的可视化工具介绍
7.1 D3.js
D3.js 是用于数据可视化的开源的JavaScript函数库，被认为是最好的JavaScript可视化框架之一
地址 D3.js - Data-Driven Documents (d3js.org)
7.2 Vega
Vega 是一种可视化语法。通过其声明式语言，可以用JSON格式描述可视化的视觉外观和交互行为，并使用 Canvas 或 SVG 生成视图
地址 A Visualization Grammar | Vega
7.3 G2
G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
