这是我参与「第四届青训营 」笔记创作活动的的第15天。本节课的主题是【数据可视化基础】，授课老师为何霏霏。
本篇笔记分别对课程中所讲的几个要点进行一些解读，如若有误，欢迎大家在评论区交流，指出不当之处。
01. 数据可视化
生活中的数据可视化
电子表格 手机存储空间 地图 体温计
什么是数据可视化
将数据呈现成可视化形式，包括图表，关系图，地图
数据可视化分类
科学可视化
信息可视化
可视分析
为什么要可视化
1.记录信息
2.分析推理
3.证实假设
安斯库拇四重奏：可视化的重要性
02.可视化设计原则、方法
糟糕/错误的可视化呈现
难以提取有效信息
常见错误可视化方式
-
透视失真
数字应与与视觉元素的感知程度成正比
-
图形设计&数据尺度
视觉预期问题
-
数据上下文
设计原则
能够正确地表达数据中的信息而不产生偏差与歧义
- 准确
- 节省笔墨
- 节省空间
- 消除无价值图形
- 最短时间传递最多信息
Data-ink
03.视觉感知
可视化致力于外部认知，即利用大脑以外的资源来增强大脑本身的认知能力
- 感知
- 感觉器官
- 视觉感知=通过人的视觉在人脑中形成的直接反应
认知过程
结论
格式塔学派
整体大于部分，部分依附于整体
格式塔理论被广泛运用于视觉设计中
原则：
-
就近原则（数据元素靠近≈突出关联性）
-
相似原则（Size，color…）
-
连续性原则（不连续的物体看成连续整体）
-
闭合性原则（图形不闭合，主体有闭合取趋向）
-
共势原则
-
对称性原则
-
图形与背景关系原则
总结
04.视觉编码（Visual Encoding）
将数据信息映射成可视化元素的技术
⬇️ ⬇️
attr + value 可视化符号+视觉通道
可视化符号
视觉通道
优先级
05.面向前端的数据可视化工具介绍
D3
D3.js最好的JS可视化框架之一，有一定上手难度
Vega
一种可视化语法，通过声明式语言，用JSON格式描述可视化的视觉外观和交互行为，并使用Canvas或SVG生成图（推荐了解）
G2
类似Vega
Echarts
JS框架，基于ZRender矢量图形库（渲染引擎）
