这是我参与「第四届青训营」笔记创作活动的第10天
什么是数据可视化
数据可视化简单点来说，就是将一些不直观的数据，使用图形的方式展示出来，这样我们就能很直观的看出，数据之间的差异，以及每列数据它到底表示什么，可以参考下面图片，这些就是一些数据可视化的展示效果
上图使用数据可视化展示之后，我们就能很直观的看出数据之间的差异情况，以及数据所代表的含义等主要信息
生活中的数据可视化
下图很清晰的表示出我们手机所占用的空间大小，以及哪些文件类型占用的空间会更大等等主要信息
还有我们所使用的地图导航，也是数据可视化的一种形式
当然我们生活中还有更多的可视化，比如体温计等等
数据可视化分类
数据可视化主要分为三大类
- 科学可视化 -- 科学实验数据的展示
- 信息可视化 -- 对抽象数据进行图形展示
- 可视分析 -- 对分析数据的直观展示以及带有一定的交互反馈效果
为什么要使用可视化
- 记录信息
- 分析推理
- 证实假设
- 交流思想
下面我们来看一组数据
我们看图第一感觉肯定就是数据好多好密集，很难一眼找出重点，以及它们的差异情况等信息，但是如果我们使用可视化的方式来进行展示，那么会是一个什么样的结果呢？
当我们采用数据可视化进行展示之后，我们就能清晰的发现这些数据之前所存在的差异情况，大小信息等重要信息。所以这也是我们为什么要使用可视化来展示一些数据信息，就是因为从数据的本身，我们人眼很难一眼判断出这些数据之间所存在的差异，数据浮动区间等信息，但是如果采用可视化图形的方式，我们就能一眼判断出这些数据存在的差异情况等重要信息。
可视化的设计原则
下面我们来看一组，不符合设计原则的可视化图形
上图所示，虽然采用了可视化，但是我们也很难从中选出有价值的信息，原因也只有一个，那就是数据太过于复杂，所对应的图形也展示的很密集，导致有价值的信息被 “普通化”。所以在设计可视化的时候需要遵循一些设计原则，而不是盲目的使用，否则就会带来如上图所示的效果。
设计原则： 能够正确地表达数据中的信息而不产生偏差与歧义
这句话理解起来有些抽象，简单点理解来说就是，能够从中正确的表达数据当中的一些重要信息，并且不要产生一些数据偏差以及数据之间的差异大小不能看似一样
我们来看一个栗子：下图中绿色占比 19.5% 与 紫色占比 21.2% 肉眼可见几乎是没有什么区别的，如果不是图形当中的数据展示，我们可能以为这就是一样大小的，这显然就产生的歧义，这也就是上面所表达的歧义。
下面我们来看一下 Edward R.Tufte 所定义的可视化设计原则是什么？
- 准确的展示数据
- 节省笔墨
- 节省空间
- 去除没有 无价值 图形
- 在短时间传达更多有价值的信息
前端中的可视化库
D3 简单的柱状图示例
D3js是用于数据可视化的开源的JavaScript函数库，被认为是最好的JavaScript可视化框架之一。
Vega 简单的柱状图示例
Vega是一种可视化语法。通过其声明式语言，可以用JSON格式描述可视化的视觉外观和交互行为，并使用 Canvas或SVG生成视图。
Echarts 简单的柱状图示例
ECharts，一个使用JavaScript 实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器(lE9/10/11,Chrome，Firefox, Safari等)，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。它也是我们使用最多的一个可视化库
总结
- 了解到了数据可视化的发展史
- 为什么需要使用数据可视化，以及在不使用可视化与使用可视化带给我们的便利
- 了解了前端可视化库的简单使用
