这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
课程内容与目标
- 了解数据可视化的概念和基本原则
- 能够识别出不好的，甚至是有误导性的可视化呈现
- 了解一些面向前端的数据可视化工具
1. 什么是数据可视化
Anything that converts data into a visual representation(like charts, graphs, maps, sometimes even just tables)
数据可视化分类
- 科学可视化：科学实验数据的直观展示
- 信息可视化：对抽象数据的直观展示
- 可视分析：对分析结果的直观展现，及交互式反馈，是一个跨领域的方向
可视化设计原则和方法
可视化设计原则
能够正确地表达数据中的信息而不产生偏差与歧义
一个出色的可视化设计可在最短的时间内，使用最少的空间、用最少的笔墨为观众提供最多的信息内涵
——Edward R.Tufte
- 准确地展示数据
- 节省笔墨
- 节省空间
- 消除不必要的“无价值”图形
- 在最短时间内传达最多的信息
Data-Ink Ratio
- 最大化数据墨水占比 ( Data-Ink Ratio )
- 可视化图形由墨水和空白区域构成
- 数据墨水: 可视化图形当中不可擦除的核心部分被称之为“ 数据墨水”
- 擦除数据墨水将减少图形所传达的信息量
- 数据墨水占比:可视化图形中用于展示核心数据的“墨水”在整体可视化所使用的墨水中的比例
常见的错误可视化
透视失真
- 如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比。
- 使用清晰、详细和彻底的标签，以避免图形失真和含糊不清。
图形设计&数据尺度
图形的每一部分都会产生对其的视觉预期( visual expectation) ：
- 这些预期往往决定了眼睛实际看到的东西；
- 错误的数据洞察，产生于在图形的某个地方发生的不正确的视觉预期推断。
一个典型的例子：轴刻度，我们期望它从始至终能够保持连贯且一致。
数据上下文
3. 视觉感知
格式塔理论
| 就近原则(Proximity) | 当视觉元素在空间距离上相距较近时，人们通常倾向于将他们归为一组。将数据元素放在靠近的位置，可以突出它们之间的关联性。 |
|---|---|
| 相似原则(Similarity) | 形状、大小、颜色、强度等属性方面比较相似时，这些物体就容易被看作一个整体。 |
| 连续性原则(Continuation) | 人们在观察事物的时候会很自然地沿着物体的边界，将不连续的物体视为连续的整体。 |
| 闭合原则(Closure) | 有些图形可能本身是不完整或者不闭合的，但主体有一种使其闭合的倾向，人们就会很容易地感知整个物体而忽略未闭合的特征。 |
| 共势原则(Common Movement) | 如果一个对象中的一部分都向共同的方向去运动，那这些共同移动的部分就易被感知为一个整体。 |
| 对称性原则(Symmetry) | 对称的元素被视为同一组的一部分。 |
| 图形与背景关系原则(Figure-ground) | 大脑通常认为构图中最小的物体是图形，而更大的物体则是背景。跟凹面元素相比，凸面元素与图形相关联更多些。 |
4. 视觉编码
视觉编码是一种：将数据信息映射成可视化元素的技术。
数据信息————>属性 + 值 可视化元素————>可视化符号 + 视觉通道
可视化符号（Mark）
- 当表示元素是Mark包括：点、线、面
- 当表示关系时Mark包括：闭包、连线
视觉通道
基于数据属性，控制可视化的符号展现样式，例如点根据其所代表的数据属性的不同可有不同的形状与颜色。
- 数量通道(Magnitude Channel):用于显示数据的数值属性(定量/定序)包括:位置、长度、角度、面积、深度、色温、饱 和度、曲率、体积。
- 标识通道(Identity Channel):用于显示数据的分类属性( 是什么/在哪里)包括:空间区域、色向、动向、形状
视觉编码的优先级
- 当利用数量通道编码表示数值属性时:位置通道是最为精确的，其次是长度、角度、面积、深度、色温、饱和度、曲率、 最后是体积。
- 当利用标识通道表示分类属性时:划分空间区域最为有效，其后依次是色向、动向、形状。
5. 面向前端的可视化工具
- D3
- Vega
- G2
- Echarts
总结
日常生活中常接触的可视化就是将实验所得数据转化成图片、表格、柱形图等，能够让我们巧妙地观察数据，在科研生活中，一张数据详实、配色美观、让人一目了然的图片往往能让论文增色不少，而利用好各种可视化工具将各式各样的数据展示给用户也是一名前端工程师的必备技能~
