这是我参与「第五届青训营 」笔记创作活动的第13天。
本堂课重点内容
本节课重点在于了解数据可视化的概念和基本原则，让我们能够识别出不好的，甚至是有误导性的可视化呈现，同时也了解一些面向前端的数据可视化工具。
详细知识点介绍
什么是数据可视化
生活中的数据可视化：MOBA游戏的小地图，高德地图，体温计……
anything that converts data into a visual reprosentation.
数据可视化分类：
- 科学可视化
- 信息可视化
- 可视分析
数据可视化的作用：
- 记录信息
- 分析推理
- 证实假设
- 交流思想
可视化设计原则和方法
糟糕的可视化呈现（配色纹理混乱，表项过多）：
错误的可视化呈现（偏差和歧义）：
可视化设计原则：能够正确表达数据而不产生偏差和歧义。
常见的错误可视化：
透视失真
- 如果数字是由视觉元素表示的，那么他们应该与视觉元素的感知程度成正比
- 使用清晰、详细和彻底的标签，以避免图形失真和含糊不清
图形设计 & 数据尺度
图形的每一部分都会产生对其的视觉预期：
- 这些预期往往决定了眼睛实际看到的东西
- 错误的数据洞察，产生于在图形的某个地方发生的不正确的视觉预期推断
一个典型的例子：轴刻度，我们希望它从始至终保持连贯和一致。
数据上下文
可视化设计原则
- 准确展示数据
- 节省笔墨
- 节省空间
- 消除不必要无价值图形
- 在最短时间内传达最多信息
最大化数据墨水占比：
- 可视化图形由墨水和空白区域构成
- 数据墨水：可视化图形中不可擦除的核心部分称之为数据墨水
- 擦出数据墨水将减少图形所传达的信息量
- 数据墨水占比：可视化图形中用于展示核心数据的墨水在整体可视化所使用的墨水中的比例
视觉感知
客观事物通过人的视觉在人脑中形成的直接反映。
我们可以通过视觉方式来加快我们的认知过程
格式塔理论：整体决定部分的性质，部分依从于整体。结构比元素重要，视觉形象首先作为统一的整体被认识。
- 就近原则：当视觉元素在空间距离上相距较近时，人们通常倾向于将其分为一组。
- 相似原则：形状、大小、颜色、强度等属性方面比较相似时，这些物体就容易被看作一个整体。
- 连续性原则：人们在观察事物时会自然沿着物体边界，将不连续物体视为连续的整体。
- 闭合原则：有些图形本身不完整或不闭合，但主体有一种使其闭合的倾向，人们就会很容易感知整个物体而忽略未闭合的特征。
- 共势原则：如果一个对象中的一部分都向共同的方向去运动，那这些共同移动的部分就容易被感知为一个整体。
- 对称性原则：对称元素被视为同一组的一部分。
- 图形与背景关系原则：大脑通常认为构图中最小的是图形，更大的是背景。
视觉编码
一种将数据信息映射成可视化元素的技术。
可视化符号：用于在可视化中表示数据元素或者元素之间的关联。 视觉通道：基于数据属性，控制可视化的符号展现样式。
- 数量通道：用于显示数据数值属性
- 位置、长度、角度、面积、深度……
- 标识通道：用于显示数据的分类属性
- 空间区域、色向、动向、形状……
可视化工具
D3.js是用于数据可视化的开源的JavaScript函数库。
Vega是一种可视化语法。通过其声明式语言，用JSON格式描述可视化，通过canvas或者svg描述效果。
G2是一套面向常规统计图表，以数据驱动的高交互可视化图表。
ECharts，都很熟悉不再赘述。
