当前位置: 代码迷 >> 综合 >> 《Getting Started with D3》中文翻译(第一章)
  详细解决方案

《Getting Started with D3》中文翻译(第一章)

热度:55   发布时间:2023-12-06 17:58:55.0

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的例子代码,这样所有的都有了!) 


  相关解决方案