这是我参与「第五届青训营 」伴学笔记创作活动的第16天

什么是数据可视化

分类：

• 科学可视化
• 信息可视化
• 可视分析

可视化设计原则

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

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

为什么要数据可视化：

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

常见的错误可视化：

• 透视失真
• 图形设计&数据尺度
• 数据上下文

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

格式塔理论

就近原则

• 当视觉元素在空间距离上相距较近时，人们通常倾向于将他们归为一组。
• 将数据元素放在靠近的位置,可以突出它们之间的关联性。

相似原则

• 形状、大小、颜色、强度等属性方面比较相似时，这些物体就容易被看作一个整体。

连续性原则

• 人们在观察事物的时候会很自然地沿着物体的边界，将不连续的物体视为连续的整体。

闭合原则

• 有些图形可能本身是不完整或者不闭合的，但主体有一种使其闭合的倾向，人们就会很容易地感知整个物体而忽略未闭合的特征

共势原则

• 如果一个对象中的一部分都向共同的方向去运动，那这些共同移动的部分就易被感知为一个整体。

对称性原则

• 对称的元素被视为同一组的一部分。

图形与背景关系原则

• 大脑通常认为构图中最小的物体是图形，而更大的物体则是背景。
• 跟凹面元素相比．凸面元素与图形相关联更多些。

面向前端的可视化工具

D3

• D3 支持将任意数据绑定到DOM，然后将数据驱动的转换应用于文档。例如，可以通过D3用数字数组生成HTML表。或者，使用相同的数据创建具有平滑过渡和交互的交互式SVG条形图。 D3不是一个试图提供所有可能的功能的单一框架。相反，D3解决了问题的症结：基于数据有效操作文档。这提高了灵活性，公开了HTML，SVG和CSS等Web标准的全部功能。D3消耗极小，速度极快，支持大型数据集以及交互和动画的动态行为。

Vega

• Vega 为各种可视化设计提供了基本的构建块：数据加载和转换，比例，地图投影，轴，图例和图形标记，如矩形，线，绘图符号等。可以使用反应信号来指定交互技术，这些信号动态修改可视化以响应输入事件流。

G6

• G6是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。

ECharts

• ECharts是使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。