这是我参与「第四届青训营 」笔记创作活动的第16天
重点
- 数据可视化的概念和基本原则
- 错误的可视化
- 视觉感知：格式塔理论
- 视觉编码
- 前端的可视化工具
数据可视化
数据可视化概念和基本原则
定义&分类
定义：任何一种将数据转换成一种可视化呈现形式
分类：根据数据不同
- 科学可视化：科学实验数据
- 信息可视化：抽象数据 如文本 图像
- 可视分析：结合可视化 人机交互 数据分析
数据可视化原因
- 记录信息
- 分析推理
- 证实假设
- 交流思想
可视化原则
能够正确地表达数据中的信息而不产生偏差和歧义
常见的错误可视化
透视失真
如果数字用视觉元素表示，数字应该和视觉元素的感知程度成正比
使用清晰详细彻底的标签，以免图形失真和含糊不清
例子：绿色和紫色部分比较，近大远小的效果 宣传apple
图形设计 数据尺度
图形会产生视觉预期visual expectation
预期决定了眼睛实际看到的东西
例子：轴刻度 希望始终保持连贯且一致。但下图前面每一个大字间隔20 后面60开始间隔40
数据上下文
可视化设计原则
- 准确展示数据
- 节省笔墨
- 节省空间
- 消除不必要的无价值图形
- 最短时间内传达最多的东西
节省笔墨 节省空间
视觉感知
3有多少个
A B 亮度对比
格式塔理论
格式塔理论认为是人脸 构造派则认为是动物
就近原则
相似原则
连续原则
闭合原则
共势原则
对称性原则
图形与背景关系原则
视觉编码
将数据信息映射成可视化元素的技术
- 数据信息：属性+值
- 可视化元素：可视化符号+视觉通道
可视化符号 mark
视觉通道
视觉通道优先级
例子
前端的数据可视化工具
D3
Vega
vega.github.io/vega/
vega.github.io/editor/#/ex…
G2
g2.antv.vision/zh/
g2.antv.vision/zh/examples…
Echarts
echarts.apache.org/zh/index.ht…
echarts.apache.org/examples/zh…
总结
重点讲了错误的可视化，格式塔的几个理论，视觉编码和前端的可视化工具
