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

什么是数据可视化

生活中的可视化：

概念：

Anything that converts data into a visual representation(like charts, graphs, maps, sontimes even just tables)

任何一种将数据转换成一种可视化呈现形式的一个东西，都是数据可视化的呈现，包括统计图表、关系图、地图，甚至是表格等等。它的类型是十分丰富的。

数据可视化的分类：

为什么要数据可视化：

可视化设计原则和方法

这里先举出一些反面案例：

这些图看起来十分混乱：有的图给我们的视觉冲击力和压迫感较强，可能会导致观察者看这些图的意愿较低；有的图提供的信息特别多，观察者很难从图标中提取到有效的信息......因此这些可视化设计都是比较糟糕的，需要加以改善。

透视失真（经常发生在 3D 可视化中）这张图片中，紫色的占比其实是比绿色要大的，但由于 3D 图像近大远小，使得绿色块看起来占比最大，这就给观众造成了一种误导。

因此：

图形设计 & 数据尺度这张图片中，60 之前的数据是每一大格跨度 10 ，但 60 之后的数据是每一大格跨度 20 ，如果把刻度边的数字擦除，观察者就会按照自己的预期错误猜测了后面的数据跨域，这也造成了误导。

因此：

节省笔墨：即最大化数据墨水占比。可视化图形由墨水和空白区域构成，而绝大多数墨水都是数据墨水（可视化图形中不可擦除的核心部分被称为“数据墨水”），用于绘制散点和对应标签，10% - 20% 的墨水是非数据墨水，用于绘制坐标轴和刻度线（并非所有的非数据墨水都没有用，比如坐标轴信息等）。

D3.js 是用于数据可视化的开源的 JavaScript 函数库，被认为是最好的 JavaScript 可视化框架之一。

Vega 是一种可视化语法，通过其声明式语言，可以使用 JSON 格式描述可视化的视觉外观和交互行为，并使用 Canvas 或 SVG 生成视图。

一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2 ，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

这个库大家应该用的比较多，相对熟悉一点，这里不赘述了。