这是我参与「第四届青训营」笔记创作活动的第14天
Why data visualization?
- 数据可视化分类
- 科学可视化
- 信息可视化
- 可视分析
- 数据可视化的意义
- 记录信息
- 分析推理
- 证实假设
- 交流思想
- 示例
- 安斯库姆四重奏
- 看数据表格难以辨别差异
- 看可视化图表非常直观
可视化设计原则和方法
- 原则
- 能够正确地表达数据中的信息而不产生偏差与歧义
- 错误可视化示例
- 常见的错误可视化
- 透视失真
- 如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比
- 应该使用清晰、详细和彻底的标签，以避免图形失真、含糊不清
- 例：乔布斯发布会的3D饼图并不合适，扇区面积和比例不完全对应
- 图形设计&数据尺度不合适
- 我们对图形的每一部分都会产生一定的视觉预期，这些预期往往左右了眼睛实际看到的东西，对数据错误的印象潜伏其中
- 例：对于轴刻度的保持连贯、一致的预期
- 数据上下文缺失
- 做数据可视化一定要带上数据的上下文
- 透视失真
- 一个出色的可视化设计可在最短的时间内，使用最少的空间、用最少的笔墨为观众提供最多的信息内涵（Edward R. Tufte）
- 要点
- 准确地展示数据
- 节省笔墨
- 节省空间
- 消除不必要的冗余图形
- 在最短的时间内传递最多的信息
- 最大化数据墨水占比
- 数据墨水占比：可视化图形中用于展示核心数据的“墨水”在整体可视化所使用的“墨水”中的比例
- 要点
- 能够正确地表达数据中的信息而不产生偏差与歧义
视觉感知
- 事物变化的部分和事物的边界更容易引起人的注意
- 格式塔(德语Gestalt)学派：整体>部分
- 就近原则: 把数据元素放在靠近的位置以突出关联性
- 相似原则: 属性相似的物体容易被看作一个整体
- 连续性原则
- 闭合原则
- 共势原则
- 如果一个对象中的一部分都向共同的方向去运动，那这些共同移动的部分就易被感知为一个整体
- 对称性原则
- 图形与背景关系原则
视觉编码
- 将数据信息映射成可视化元素 |-|Channels↓/Marks→|Points|Lines|Areas| |---|---|---|---|---| ||Position||||| ||Size||||| ||(Grey)Value||||| ||Texture||||| ||Color||||| ||Orientation||||| ||Shape|||||
- 可视化符号(Marks): 表现数据元素之间的关联
- 视觉通道(Channels): 基于数据属性控制可视化的符号展现样式
- 数量通道
- 标识通道
- 视觉编码的优先级
面向前端的可视化工具介绍
- D3.js
- Vega
- 一种可视化语法，用JSON描述
- G2
- 一种可视化图形语法
- ECharts
