数据可视化基础 | 青训营笔记
这是我参与「第五届青训营」伴学笔记创作活动的第 15 天
0x1 什么是数据可视化
-
数据可视化
任何可以将数据转换成可视化表现形式是事物（如图表、地图等）
-
数据可视化分类
-
科学可视化
科学实验数据的直观展示
-
信息可视化
对抽象数据的直观展示
-
可视分析
对分析结果的直观展现，及交互式反馈，是一个跨领域的方向
-
-
数据可视化意义
记录信息 | 分析推理 | 证实假设 | 交流思想
0x2 可视化设计原则和方法
-
常见的可视化错误
-
透视失真
- 如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比
- 使用清晰、详细、彻底的标签，以避免图形失真和含糊不清
-
图形设计与数据尺度
图形的每一部分都会产生对其的视觉预期：
- 这些预期往往决定了眼睛实际看到的东西
- 错误的数据洞察，产生于图形的某个地方发生的不正确的视觉预期推断
-
数据上下文
- 避免上下文缺失导致误判
-
-
可视化设计原则
能够正确地表达数据中的信息而不产生偏差和歧义
-
准确地展示数据
-
节省笔墨
最大化数据墨水占比（Data-Ink Ratio）
- 可视化图形由墨水与空白区域构成
- 数据墨水：可视化图形当中不可擦除的核心部分（如：散点、标签等）
- 擦除数据墨水将减少图形所传达的信息量
- 数据墨水占比：数据墨水在整体可视化所使用的墨水中的比例（如：坐标轴信息等）
- 可视化图形由墨水与空白区域构成
-
节省空间
-
消除不必要的“无价值”图形
-
在最短的时间内传达最多的信息
-
0x3 视觉感知
-
视觉感知
- 感知：是指客观事物通过人的感官（眼/鼻/耳/神经末梢）在人脑中形成的直接反映
- 视觉感知：是客观事物通过人的视觉在人脑中形成的直接反映
-
认知过程
由信息的获取、分析、归纳、解码、存储、概念形成、提取、使用等一系列阶段组成的按一定程序进行的信息加工系统
-
相对判断和视觉假象
- 人的视觉系统容易被边界吸引
- 可视化设计应避免结果存在阻碍或误导用户的元素
-
格式塔理论（Gestalt Laws）
- 理论核心：整体决定部分的性质，部分依从于整体
- 就近原则（Proximity）：当视觉元素在空间距离上相距较近时，更会被归于一组
- 将元素放在较近的位置从而凸显出之间的关联性
- 相似原则（Similarity）：形状、大小、颜色、强度等属性较相似时，这些物体更会被看作一个整体
- 连续性原则（Continuation）：将不连续的物体视为连续的整体
- 闭合原则（Closure）：有些图形可能本身是不完整或不闭合的，但主体有种使其闭合的倾向
- 共势原则（Common movement）：如果一个对象中的一部分都向共同的方向去运动，那么这些共同移动就会被感知为一个整体
- 对称性原则（Symmetry）：对称的元素会被视为同一组的组成部分
- 图形于背景关系原则（Figure-ground）：更小/凸的物体被认为是图形，更大/凹的物体被认为是背景
0x4 视觉编码
-
视觉编码
是一种将数据信息映射成可视化元素的技术
-
可视化元素
-
可视化符号（Mark）
用于在可视化中表现数据元素或元素之间的关联
- 元素：点、线、面
- 关系：闭包、连线
-
视觉通道（Channel）
基于数据属性，控制可视化符号展现样式
-
数量通道（Magnitude Channel）
用于显示数据的数值属性：位置、长度等
-
表示通道（Identity Channel）
用于显示数据的分类属性：空间区域、色向等
-
-
-
视觉编码的优先级
不同的视觉编码在表达信息的作用和能力上有不同的特性
- 数量通道：位置 > 长度 > 角度 > 面积 > 深度 > 色温 > 饱和度 > 曲率 > 体积
- 标识通道：划分空间区域 > 色向 > 动向 > 形状
0x5 面向前端的可视化工具介绍
-
D3.js
用于数据可视化的开源的 JavaScript 函数库
-
Vega
是一种可视化语法，通过其声明式语言，可以用 JSON 格式描述可视化的视觉外观和交互行为，并使用 Canvas 或 SVG 生成视图
-
G2
一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性
-
ECharts
一个使用 JavaScript 实现的开源可视化库
