这是我参与「第四届青训营 」笔记创作活动的第4天

一、什么是数据可视化

任何一种将数据转化为视觉呈现的都能称为是数据可视化。常见的数据可视化有：统计图表、关系图、地图等。数据可视化的类型非常丰富。根据希望可视化的数据类型的不同，我们将可视化分类分为学可视化和信息可视化两种分支。科学可视化主要是对科学数据的直观展示，而信息可视化则是对抽象数据的直观展示。最近又新增了一个可视分析学的方向，结合可视化的界面，来对数据进行分析和推断。在这篇文章中，我们主要介绍对前端开发比较有帮助的信息可视化部分。

为什么要数据可视化

对于数据可视化，我们主要有如下理由：

• 记录信息
• 分析推理
• 证实假设
• 交流思想

二、可视化设计原则和方法

能够正确地表达数据中的信息而不产生偏差与歧义。

常见的错误可视化

• 数据失真
  • 如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比。
  • 应该使用清晰、详细和彻底的标签，以避免图形失真和含糊不清。
• 图形设计 & 数据尺度
  • 图形的对应的视觉预期应该与被可视化的数据相符。
• 数据上下文
  • 在通过可视化讲述观点时，需要把数据上下文补充全，否则可能会产生具有误导性的图表。

可视化设计原则

• 准确地展示数据
• 节省笔墨
• 节省空间
• 消除不必要的“无价值”图形
• 在最短的时间内传递最多的信息

三、视觉感知

视觉感知时客观事物通过人的视觉在人脑中形成的直接反映。可视化致力于外部认知，也就是说，怎样利用大脑以外的资源来增强大脑本身的认知能力。人类视觉系统观察的是变化，而不是绝对值，并且容易被边界吸引。在可视化设计中，设计者需要充分考虑到人类感知系统的这些现象，以使得设计的可视化结果不会存在阻碍或舞蹈用户的可视化元素。

四、视觉编码

视觉编码是一种将数据信息映射成可视化元素（可视化元素+视觉通道）的技术。

可视化符号

• 表示元素时的符号包括点、线、面。
• 表示关系时的符号包括闭包、连线。

视觉通道

视觉通道有两种类型

• 数量通道：用于显示数据的数值属性。
• 标识通道：用于显示数据的分类属性。

五、前端可视化工具

• D3.js
• Vega
• G2
• ECharts