D3.js学习笔记（一）

---

大数据蓬勃发展的时代，每天都是海量的数据在人类社会中产生。怎样从中获取有用的信息，变得越来越重要。获得信息最佳方式之一就是通过数据可视化，快速地抓住要点信息。

数据可视化（ Data Visualization ）起源于18世纪，William Playfair 在他出版的书籍《 The Commercial and Political Atlas 》中第一次使用了柱形图和折线图。当时是为了表示国家的进出口量，在今天依然这么使用。19世纪初，他出版了《 Statistical Breviary 》一书，里面第一次使用了饼状图。这三种都是至今最常用的最著名的可视化图形。19世纪中叶，数据可视化主要被用于军事用途，用来表示军队死亡原因、军队的分布图等。进入20世纪，数据可视化有了飞跃性的发展。1990年，在人机界面学会上，作为信息可视化原型的技术被发表。1995年，IEEE Information Visualization 正式创立，信息可视化作为独立的学科被正式确立。随着2012年世界进入大数据时代，数据可视化作为大量数据的呈现方式，成为当前重要的课题。

D3是什么？

D3的全称是Data-Driven Documents，是一个JavaScript的函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一，它被很多其他的表格插件所使用。D3使你有能力借助HTML，SVG和CSS来生动地可视化各种数据。D3不需要你使用某个特定的框架，它的重点在于对现代主流浏览器的兼容，同时结合了强大的可视化组件，以数据驱动的方式去操作DOM。

D3简史

• 2009年，Mike Bostock等人开发了Protovis，可以算是D3的前身。
• 2010年，他们停止开发Protovis，用JavaScript开发了D3。
• 2011年2月，D3的v1.0版本发布。
  同年8月，v2.0版本发布，功能大幅增加。
• 2012年，V3.0版本发布，修复了大量bug，更加稳健。
• 2016年6月，v4.0版本发布，更易于应用，功能更加强大。

D3的优势

• 数据能够与DOM绑定在一起
• 数据转换和绘制是独立的
• 基于SVG，缩放不会损失精度
• D3可以高效操作大数据文档，支持大数据集的动态交互和动画效果。

附几张来自D3.js官网的示例图片：

http://bl.ocks.org/mbostock/4060606

http://bl.ocks.org/mbostock/4339083

http://bl.ocks.org/mbostock/3943967

http://bl.ocks.org/mbostock/4060954

http://bl.ocks.org/mbostock/5944371

---

参考资料

• 《精通D3.js 交互式数据可视化高级编程》 吕之华著 电子工业出版社 2015.08
• D3.js官方网站
• http://blog.jobbole.com/36507/
• http://www.ruanyifeng.com/blog/2014/11/basic-charts.html
• http://www.ourd3js.com/