这是我参与「第四届青训营 」笔记创作活动的第5天
在数据可视化基础（一）与大家一起探讨了数据可视化概念，接下来我们了解一下设计原则和前端同学常用的可视化工具。
格式塔
就近原则
- 当视觉元素在空间距离上相距较近时，人们通常倾向于将他们归为一组
- 将数据元素放在靠近的位置，可以突出他们之间的关联性
相似原则
- 形状、大小、颜色、强度等属性方面比较相似时，这些物体就容易被看作一个整体
连续性原则
- 人们在观察事物的时候会很自然地沿着物体的边界，将不连续的物体视为连续的整体
闭合原则
- 有些图形可能本身时不完整或者不闭合的，但主体有一种使其闭合的倾向，人们就会很容易地感知整个物体二忽略未闭合的特征
共势原则
- 如果一个对象中的一部分都向共同的方向去运动，那这些共同移动的部分就易被感知为一个整体
对称性原则
- 对称元素被视为同一组的一部分
图形与背景关系原则
- 大脑通常认为构图中最小的物体是图形，而更大的物体则是背景
- 跟凹面元素相比，凸面元素与图形相关联更多些
视觉编码
"Semiology of Granphics"[1967]提出视觉编码的理论原则>
可视化符号
用于在可视化当中表现数据元素或元素之间的关联
- 当表示元素时Mark包括:点、线、面
- 当表示关系时Mark包括:闭包、连线
视觉通道
基于数据属性，控制可视化的符号展现样式，例如，点根据其所代表的数据属性的不同可有不同的形状与颜色。
分类
数量通道(Magnitude Channel )
数量通道用于显示数据的数值属性（定量/定序) 包括:位置、长度、角度、面积、深度、色温、饱和度、曲率、体积。
标识通道( ldentity Channel )
用于显示数据的分类属性（是什么/在哪里）包括:空间区域、色向、动向、形状
视觉编码的优先级
不同的视觉编码在表达信息的作用和能力上有不同的特性
- 当利用数量通道编码表示数值属性时:位置通道是最为精确的，其次是长度、角度、面积、深度、色温、饱和度、曲率、最后是体积。
- 当利用标识通道表示分类属性时:划分空间区域最为有效，其后依次是色向、动向、形状。
面向前端的可视化工具
- D3.js 是用于数据可视化的开源的JavaScript函数库，被认为是最好的JavaScript可视化框架之一。
- VegaVega是—种可视化语法。通过其声明式语言，可以用JSON格式描述可视化的视觉外观和交互行为，并使用Canvas或SVG生成视图。柱状图
- G2—套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用G2，你可以无需关注图表各种繁琐的实现细节，—条语句即可使用Canvas 或 sVG构建出各种各样的可交互的统计图表。柱状图
- Echarts一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器(IE9/10/11,Chrome，Firefox,Safari等)，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表柱状图
总结
本节课探讨了数据可视化概念和设计原则，介绍了前端同学常用的可视化工具。期望大家对数据可视化有一些初步认知，能够在日常生活、学习、工作的过程中能识别和避免不好的、甚至是有误导性的可视化呈现。
