可视化基础

优秀的数据可视化五点建议

• 对内容背景有透彻的理解，了解谁是观众以及他们需要什么，之后再思考如何呈现数据
• 以何种可视化的呈现方式能够让观众更直观、轻松的理解，处理数据
• 去删除那些不会为图像增加信息价值的内容，这么做能减少认知负担，也能让数据能突出
• 战略性的把颜色、尺寸、页面布局作为指示标志，让他们对观众说：这个最重要，往这看
• 最棒的可视化是这项可视化会成为故事或者叙事内容的关键点。

可视化的整个流程

InfoVis 是信息可视化（Information visualization）的缩写。

HCI 是人机交互（Human-Computer Interaction）的缩写。

第三个变量显示方法

如果我们想在一个二维的图表中显示第三个变量我们可以采用如下方法：

视网膜变量

时间这个变量可以通过帧的变化来加以体现。

不同的可视化语言比较

如图所示，在可视化中从低到高，可视化开发效率越来越高，但是灵活性也越来越差。

HTML5 Canvas https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

WebGL https://en.wikipedia.org/wiki/WebGL

SVG（可缩放向量图形） https://developer.mozilla.org/en-US/docs/Web/SVG

D3.js https://d3js.org/

NVD3 http://nvd3.org/

Dimple.js http://dimplejs.org/

Rickshaw http://code.shutterstock.com/rickshaw/

Chartio https://chartio.com/

RAW http://rawgraphs.io/

D3介绍

为什么选择D3

• D3不会掩藏文档对象的模型，而是通过CSS选择器等常见约定，直接利用HTML模式和SVG对象
  应对文档对象模型
• D3能让可视化图形更有表现力。将可视化与机器相区分，从而让设计师直接与开发人员互动
• D3可视化可直接在DOM（文档对象模型）和SVG上运行，因此和CSS网页和其他所有网页一样，通过相同方式设计。
• D3编码可以用于已创建的文档和HTML文档

扩展阅读

牛人的数据可视化博客：http://www.storytellingwithdata.com/
成为可视化设计者的三步骤：http://vizwiz.blogspot.com/2013/01/alberto-cairo-three-steps-to-become.html

合适的图形认知 : http://flowingdata.com/2010/03/20/graphical-perception-learn-the-fundamentals-first/

分解可视化图像示例 ： https://www.targetprocess.com/articles/visual-encoding/

“英国温变史” ： http://charts.animateddata.co.uk/uktemperaturelines/