这是我参与「第四届青训营 」笔记创作活动的第13天
数据可视化基础
重点知识点介绍
- 数据可视化的概念和基本原则
- 一些面向前端的数据可视化工具
详细知识点介绍
一、什么是数据可视化
数据可视化，任何一种将数据转化为可视化形式的方式都是数据可视化，它的类型十分丰富，包括图表、地图、度量仪器等。
数据可视化可以分为两种
- 科学可视化（围绕着科学领域将其进行直观展示）
- 信息可视化（抽象的非结构性的数据进行可视化）
- 可视分析（最近兴起的，综合了可视化、数据分析和人机交互）
数据可视化可以帮助我们去记录信息，帮助我们进行数据的分析和推理
二、可视化的基本原则
错误的可视化会使得信息杂乱不堪，无法抓住重点和直观分析信息，容易造成误导。
因此，可视化设计原则中最重要的是能够正确地表达数据中的信息而不产生偏差
常见的可视化错误有：
- 透视失真
通常表现在3D的图中，由于透视原理导致数据表现和视觉表现效果不一致，或者说未能达到期望效果。因此使用时应注意数据的失真和表达效果
- 图形设计和数据尺度
图形的每一部分都会产生对其的视觉预期，即通过已有的图形来推论其后的表达意思（比较经典的例子：轴刻度，我们期望它从始至终能够保持连贯且一致）
- 数据上下文缺少
在通过可视化展示观点和结论时，一定要将数据的上下文补充完整，来避免结果的偶然性
可视化设计原则：
- 准确地展示数据
- 节省笔墨
注意非数据墨水并不是都没有用，它能起到描述数据信息的作用，如坐标轴
- 节省空间
- 消除不必要的“无价值”图形
- 在最短时间内传达最多的信息
在可视化设计中，设计者需要充分考虑到人类感知系统的这些现象，以使得设计的可视化结果不会存在阻碍或误导用户的可视化元素（参照格式塔理论和视觉编码）
三、数据可视化工具
D3.js，用于数据可视化的开源的JavaScript函数库，被认为是最好的JavaScript的可视化框架之一。但有一定的学习难度
Vega，相比起D3更推荐去了解，声明式
G2，和Vega类似
Echarts，和G2和Vega较大的区别就是支持强类型的
小结
明白数据可视化的作用和正确的将数据可视化，应注意使用时常犯的错误，遵循数据可视化的基本原则才能设计出优秀的数据可视化设计。
