设计原则

下面，我们来介绍一下常见的图表类型

小型多组图

这里插入的曲线展示的是一年中的各个部门在各个月中的薪水支出变化情况



盒形图是用于在一个图表中对多个分布情况进行可视化。

这两种方法多用于探索性数据分析，以了解数据分布情况。他们也用与表现特定特点和数据与变量之间的关系。

图表关系

气泡图 bubble chart - 呈现三组以上的值如何变化；呈现相关性

线条图 line chart - 通常在相等的时间间隔上，呈现整体变化和模式

地图 map - 在物理位置上将值进行编码，并且可通过对比位置来绘制模式

散点图 scatterplot - 呈现两组配对的值（例如：身高和鞋码）如何变化；呈现相关性

前意识加工

举个简单的例子，如图所示。把图中的9以不同的颜色展示，就能帮助我们很快数出图中9有几个。

前意识加工利用我们视觉和感知能力的自动处理。这就是为什么仅仅是颜色的变化数字9会显得如此不同的原因。



颜色、形状、移动和空间状态都可以作为前意识属性。

负空间

负空间是在物体的形状之间或者周围形成的



这是一个负空间的例子

数据可视化过程中正确用好颜色

首先，在将颜色用在数据可视化之前，首先你需要想好是否真的需要颜色。很多时候，黑色、白色和灰色阴影足以有效传达信息。

其次，如果要使用颜色，考虑使用不那么强烈的色彩，如天蓝色或者粉色。在颜色中可以添加一点灰度值，灰度值较高的颜色让人感觉起来更柔和一些。彩虹色，三原色或者其他明亮的颜色会让可视化产生繁杂，让人产生视觉疲劳。

确定图像有效性

去除数据垃圾

去除无关信息，更简洁的数据展示方式能让我们更好的理解数据所表达的含义。并不是数据表格做的越精美越好，简洁才有意义

计算失真系数

左侧图表中的最后一个数据减去第一个数据再除以第一数据。作为1

右侧图表中的最后一个数据减去第一个数据再除以第一数据。作为2

1/2就是失真系数，失真系数很有意义，用来衡量图表数据构造的好坏

D3函数

d3.selection.append

将 HTML 或 SVG 元素插入网页

d3.selection.attr

改变元素特征，比如位置或填充

d3.json

加载数据文件，并且返回 Javascript 对象的一个数组

d3.layout

对预定义图表对象运用常见转换

d3.nest

根据特定键对数据进行分组，并返回 JSON 的一个数组

d3.scale

将数据转换为可以呈现的像素或颜色值

最后我们再展示一下，整个可视化工具的概况

参考资料

如何正确选择图表类型：http://www.perceptualedge.com/articles/ie/the_right_graph.pdf

颜色使用规则：http://www.perceptualedge.com/articles/visual_business_intelligence/rules_for_using_color.pdf

D3：https://github.com/d3/d3/wiki/CN-Home