Getting Started with D3
CHAPTER 1 第一章 介绍
注:源码压缩包请到https://github.com/mikedewar/getting_started_with_d3下载,里面有学习所用的json文件
数据的可视化是一个老话题了。一直以来,我们总是通过这样或那样的方式来展现收集到的数据——这可以追溯到距今143年前,Minard画出了著名的《拿破仑东征图》(见下图)
译者注:拿破仑东征图又称《拿破仑征俄战役图》堪称信息可视化领域的骨灰级教材,是每一个信息可视化入门者的必修。1861年法国工程师Charles Joseph Minard绘制了1812年拿破仑征俄战役图,此图揭示了导致士兵大量死亡的元凶是低温。
现在,虽然我们进入了超速运转的时代(一方面是海量数据的激增,一方面是我们数据分析的发展和成熟),但是当我们渴望拥有更先进的可视化界面时,如:为上千万人创建动态的,互动性的图形,结合了最新一代浏览器的互联网为我们提供了这个绝佳的机会。
JavaScript是现代浏览器的一种语言,卟啦卟啦卟啦.....(译者注:js就不多介绍了,唯一注意的是对于ie,D3支持ie9以上)
D3
D3是Mike Bostock所写的一个js库,脱胎于早期的一个可视化工具集 Protovis。D3可以让我们从数据集中操作网页元素,这些网络元素包括HTML,SVG或者Canvas元素,还可以根据数据集完成各种操作,例如,创建一个散点图,我们用D3来排列SVG圆点,圆点的cx,cy属性被设置在数据集的x,y中,然后转换刻度值,从整数值转换为像素值。
D3一个巨大的优势是你不用再学习一门新的绘图语言,它完全建立在html+js+css上,如果你对jquery很熟,那么你会发现D3没有什么学习曲线,你可以用你熟悉的工具来设计了,如,firebug或Developer Tools。
不同于传统的图形化工具,它们常常在设计者和网页中间设置一个中间层,D3把焦点集中于提供处理普通任务的helper函数(如创建轴与刻度)和处理高级任务(如创建可视化图像或和弦图)上。这意味着如果你经过了D3的学习曲线后,你就进入了一个动态的,可交互的,更加先进的可视化的世界!
基本设置
D3库可以从http://d3js.org网站下载,模板结构如下:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="d3.js"></script> <script>function draw(data) { "use strict";// badass visualization code goes here}</script>
</head>
<body><script>d3.json("data/some_data.json", draw); </script>
</body>
</html>
draw,本书贯穿讲这个方法,这是有一个参数的function,当data成功下载到客户端时它将执行,它将生成可视化所需的大段代码。
“use strict” 这句话表明我们用
JSLint来写严格的js代码(译者注:其是一个JavaScript验证工具
,可以扫描JavaScript源代码来查找问题。)
d3.json() function ,第一个参数是url,第二个参数是回调函数(我们总是缺省叫它draw),它会传递一个唯一的参数——json作为一个对象或数组,虽然D3也能传递xml或csv,但是本书只用json传输。
本书的教学方法是从例子出发的,这意味着教学的前几步可能会做几个并不美观的页面,我们首先不考虑css,等熟悉后添加css并不是什么难事。
纽约MTA(大都会捷运局总线)数据集
(译者注:MTA是什么不翻译了,纽约交通枢纽,我们这本书都是用它的数据来生成图表,数据是放在google上实时更新的,但是我们用压缩包里的json数据,所以并不需要太关注这个了,关于压缩包里文件组成也不介绍了,一看便知!)服务器端数据
测试代码因为需要异步,所以需要放到服务器端,本书推荐的是Python的SimpleHTTPServer(译者注:书中没有详细介绍,不过放到服务器端应该谁都会的,如果真的嫌麻烦,不妨去Cloud9——一个云端IDE,git一下D3的例子代码,这样所有的都有了!)