D3JsDay01 资料视觉化 图表说说话—介绍篇

简介

本系列内容将会提及D3Js和资料相关内容的知识，主题订定为资料驾驭网页，其实一部分原因来自D3Js原始英文来自於Data-Driven Documents，其中documents也是网页中的物件，因此我将它命名成资料驾驭网页也更好理解，预计不定时会补充官方API文件和网页相关知识，文中能以step by step方式，期望让Javascript和处理资料的初学者能够理解。

什麽是资料视觉化(Data visualizatio)

资料视觉化是一个透过图表来说明资讯和资料的过程。换句话说可以观察与了解在资料中的走向。
简单的说法就是资料空间到图形空间的映射，另个说法就是对於每笔资料可以对应到图形上的某个地方。

为什麽需要资料视觉化

视觉的效率

人类使用视觉获取的资讯量远远超过其他器官，另外图形的呈现可以加速了解资料的效率。

至少有80%以上的外界信息经视觉获得，视觉是人和动物最重要的感觉。　引述：维基百科—视觉
参见维基百科 — 视觉

安斯库姆四重奏（Anscombe's quartet）

由於单看数据的时候可能会出现盲点，统计学家提弗朗西斯·安斯库姆（Francis Anscombe）面对拥有多个共同的统计特性当绘制图表的时候却产生不同的样貌。

如下图

参见维基百科 — 安斯库姆四重奏

科学与美学的结合

在资料视觉化中我们可以说资料来自於现实生活中的数据或是实验研究所产生的数值，例如一个班级学生的身高与体重，气象局观测的气温与湿度。
当我们为了绘制出方便人们理解的图表的时候必须也兼顾一些美学，我们并不会使用背景白色，字体或者图形也是淡色系的方式来呈现，它会增加阅读的难易度，另外过於相似的颜色也造成判读错误的可能性。

资料的表达

常见的资料视觉化方式可以使用位置、形状、大小、颜色、线条粗细、线条类型来呈现。

顺带一提以上内容是我用css的div绘制，未来会讲到的D3Js某些部分也是需要手动绘制，虽然并非以div绘制为主轴，但有兴趣的人可以前往我的codepen观看。
使用css绘制图形

小总结

资料视觉化能帮助我们快速了解资讯重点，制作简报和说故事的时候能更快速的使人们知道资讯的含意，并且必须考量到一些美学设计，让人们清楚了解各项资讯的差异。下一篇将会带入常见的资料视觉化工具介绍。