图说D3：数据可视化利器从入门到进阶 PDF下载

编辑推荐

本书阐释了制作可视化数据图表的基本方法论，以及如何结合D3高效、快速地创建可视化图表。；

内容简介

本书以一个故事开始，阐释制作可视化数据图表的基本方法论，以及如何结合D3高效、快速地创建可视化图表。本书首先解释了可视化的基本涵义，以及D3的适用人群，然后从一个具体的例子入手，告诉我们如何去挑选合适的数据集，以什么样的形式来展现数据，同时对SVG进行了基础铺垫。在D3部分，本书介绍了D3的核心概念“选择集”与“数据连接”，同时对数据连接的几个经典场景进行了演绎，还结合D3介绍了绘图所要掌握的坐标系统、比例尺等基本概念。在数据加载方面，本书讲解了D3可以解析的多种数据格式，以及从后端加载数据的多种方法，同时解释了D3动画的制作方式，为制作交互式图表奠定了基础。*后，本书揭示了掌握D3的不二法门，并希望读者能够不断实践、持之以恒。全书写作风格生动有趣、内容通俗易懂，既适合D3初学者入门，也有助于有一定经验的前端开发者快速掌握D3。

作者简介

史涛，每刻科技技术副总裁，资深前端开发者。曾任网新恒天用户体验部总监，税友软件首席前端架构师。国内首批接触D3的开发者，对数据可视化有深刻的理解，曾将D3应用于多个大型项目的数据可视化。里奇·王是视觉周刊以及FiveThirtyEight.com的记者,专注于数据可视化和交互功能。

图说D3：数据可视化利器从入门到进阶 PDF下载

1 以图叙事和D3 1
1.1 可视化，已可视 1
1.2 图表赋予数据一种形式，该形式阐述了数据的内涵 2
1.3 质量：内容为王 4
1.4 设计：形式至上 5
1.5 以图叙事 6
1.6 开启D3 7
1.7 设计师为什么喜欢D3 8
1.8 程序员为什么钟爱D3 8
1.9 什么时候不该使用D3 9
1.10 D3的使用要点 9
1.11 所需工具 10
1.12 小结 11
2 发掘并图解案例 131  以图叙事和D3	1<；br />；1.1  可视化，已可视	1<；br />；1.2  图表赋予数据一种形式，该形式阐述了数据的内涵	2<；br />；1.3  质量：内容为王	4<；br />；1.4  设计：形式至上	5<；br />；1.5  以图叙事	6<；br />；1.6  开启D3	7<；br />；1.7  设计师为什么喜欢D3	8<；br />；1.8  程序员为什么钟爱D3	8<；br />；1.9  什么时候不该使用D3	9<；br />；1.10  D3的使用要点	9<；br />；1.11  所需工具	10<；br />；1.12  小结	11<；br />；2  发掘并图解案例	13<；br />；2.1  开始	13<；br />；2.2  世界正在变老吗	14<；br />；2.3  发现并研究数据	15<；br />；2.4  打磨概念	18<；br />；2.5  选择形式	19<；br />；2.5.1  用柱形图展示数据	19<；br />；2.5.2  用堆积柱形图展示数据	20<；br />；2.5.3  用线图展示数据	22<；br />；2.5.4  用饼图展示数据	23<；br />；2.5.5  用条形图展示数据	25<；br />；2.5.6  用多个微型条形图展示数据	26<；br />；2.5.7  选图建议——思维导图	28<；br />；2.6  本书将构建的例子	30<；br />；2.7  小结	31<；br />；3  可缩放矢量图形	33<；br />；3.1  原理一瞥	33<；br />；3.2  到底什么是SVG	33<；br />；3.3  用D3绘制圆形	34<；br />；3.4  在Web Inspector中查看SVG	36<；br />；3.5  通过CSS改变SVG元素的风格	37<；br />；3.6  其他图形	39<；br />；3.6.1  矩形	39<；br />；3.6.2  圆角矩形	40<；br />；3.6.3  圆形	40<；br />；3.6.4  椭圆	41<；br />；3.6.5  多边形	41<；br />；3.6.6  线	42<；br />；3.6.7  路径	42<；br />；3.7  SVG文本	43<；br />；<；br />；3.8  SVG样式属性	46<；br />；3.8.1  颜色和透明	46<；br />；3.8.2  笔触属性	47<；br />；3.9  绘图顺序和编组	49<；br />；3.10  变形	51<；br />；3.11  用SVG构建条形图	53<br />3.12  小结	66<br />4  用D3选择集操控网页	67<br />4.1  配置D3	67<br />4.2  选择元素	68<br />4.2.1  使用CSS选择器创建选择集	71<br />4.2.2  从其他选择集中新建选择集	72<br />4.2.3  将选择集赋值为变量	72<br />4.3  通过选择集修改属性	72<br />4.3.1  attr()的工作原理	74<br />4.3.2  使用attr()应用样式类和规则	76<br />4.4  声明式的D3	77<br />4.5  链式方法调用	77<br />4.5.1  在链式调用过程中新建选择集	79<br />4.5.2  链式调用和变量赋值	80<br />4.6  添加元素	80<br />4.7  串在一起	82<br />4.8  用d3.selectAll()选中多个元素	84<br />4.9  使用选择集制作条形图	85<br />4.9.1  使用变量	96<br />4.9.2  数学运算	98<br />4.9.3  使用更好的变量	98<br />4.9.4  为数据使用变量	99<br />4.9.5  进行显式约束	100<br />4.9.6  使用循环	101<br />4.10  小结	107<br />5  数据连接：进入	109<br />5.1  什么是数据连接	109<br />5.2  数据连接的核心概念：进入	110<br />5.3  进入并绑定数据	112<br />5.4  使用数据连接制作条形图	115<br />5.5  使用匿名函数访问绑定数据	120<br />5.6  完成图形的剩余部分	123<br />5.7  在对象中存储数据	123<br />5.8  小结	129<br />6  缩放图形并添加轴线	131<br />6.1  线性比例尺	131<br />6.2  灵巧地使用边距规范	137<br />6.3  添加坐标轴	139<br />6.4  序数比例尺和坐标轴	147<br />6.5  小结	160<br />7  加载并过滤外部数据	161<br />7.1  使用人口分布数据构建图形	161<br />7.2  D3兼容的数据格式	162<br />7.3  创建服务器并上传数据	163<br />7.3.1  通过命令行初始化服务器	163<br />7.3.2  创建索引文件	164<br />7.4  D3加载数据的方法	165<br />7.4.1  回调方法	165<br />7.4.2  D3如何解析CSV表格	166<br />7.5  处理异步请求	169<br />7.5.1  用外部数据创建条形图	170<br />7.5.2  优化条形图	172<br />7.6  加载和处理大（超大）数据集	175<br />7.7  合并内容	178<br />7.8  小结	180<br />8  为图形添加交互和动画效果	181<br />8.1  数据连接：更新和退出	181<br />8.2  交互按钮	185<br />8.2.1  用数据连接创建按钮	186<br />8.2.2  让按钮更方便点击	192<br />8.3  更新图形	195<br />8.4  添加转场动画效果	199<br />8.5  使用键	200<br />8.6  小结	202<br />9  添加播放按钮	203<br />9.1  在方法中封装更新阶段	203<br />9.2  在页面上添加播放按钮	207<br />9.3  点击播放	209<br />9.4  允许用户中断播放	212<br />9.5  小结	217<br />10  修行靠自身	219<br />10.1  本书是学习D3的基础	219<br />10.2  如何克服障碍	220<br />10.3  持续编码	222<br />10.4  小结	222<br /><br />附录A  JavaScript入门	223<br />A.1  JavaScript简介	223<br />A.2  浏览器中的JavaScript控制台	223<br />A.3  基本运算、变量及数据类型	224<br />A.4  在页面和.js文件中编写JavaScript代码	227<br />A.5  数组和对象	229<br />A.6  方法和函数	232<br />A.7  if语句和for循环	233<br />A.8  调试	237<br />附录B  整理人口分布数据	241

前沿

推荐序

D3.js已一跃成为JavaScript构建数据可视化的基础工具。D3由Mike Bostock编写，并在Mike之前创建的Protovis可视化库中成功运用。与以往的JavaScript可视化库或Protovis不一样，D3被设计成一个面向底层的工具集，既能直接用于构建可视化，也可以用来编写抽象程度更高的可视化库，如Protovis。得益于该设计思想，D3可以为开发者在结构、样式及交互行为上提供更多控制机制。当然，控制机制越强，学习曲线也越陡峭。本书旨在帮助你消弭学习障碍，将D3快速运用于实际工作中。本书作者Ritchie King对数据可视化有自己独特的见解。
我和Ritchie是在2011年纽约大学的高度选择性学科《健康和环境》（SHERP）课程上认识的，那时他还是一名应届毕业生，刚刚投入到数据可视化的研究之中，对这门学科抱以很高的热情。数年之后，Ritchie毕业并在Quartz从事记者工作，我再次遇到了他。他告诉我，他已将D3与自己的工作结合，以创建可视化报表。我意识到，如果他能写一本关于D3的书，将非常新鲜、生动。这并不是一本由程序员撰写的解释某个类库工作机制的书，而是一本阐释数据可视化内涵的书——这正是其他D3著作缺少的部分。Ritchie的工作也从Quartz换到FiveThirtyEight.com，继续从事与数据驱动报表相关的工作，并将其经验悉数展现在这本书中。
本书非常适合希望用D3创建健壮的数据可视化图形的初学者和有一定经验的开发者阅读。本书从选择数据和可视化形式开始，到使用D3构建HTML元素SVG，对诸多知识点进行了细致的讲解。在详细阐述D3之前介绍SVG可以帮助读者了解基础知识，这对学习后面的高级主题（如添加坐标轴和可视化交互）来说是极有价值的。Ritchie在工作中对数据可视化的专注配合其写作风格，使本书的可读性变得非常强，而不是一本枯燥的D3类库基础教程。本书绝对是初学者和专业人士学习数据可视化的不二选择，我也非常乐意将本书收录为丛书的一部分。

Paul Dix
丛书主编

前言

数据、数据、数据。有关数据的信息林林总总堆积起来，速度比以往任何时候都要快。数据信息的急剧膨胀带来一个跨越两个世纪的需求——数据可视化，即将原始数据中的模式和趋势加工成视觉形式的艺术。
以往，这种视觉形式会通过纸张和油墨呈现在书籍、报纸和学术期刊上，固化于印刷的那个时刻。但是，现今数据却越来越频繁地被转化成像素，并以可交互的形式呈现于线上媒体，读者点点鼠标就能改变其外观。当今，每个数据从业者都需要一款工具协助其处理——从信息到网页，从原始静态的数字到动态图形。
“D3”是“数据驱动文档”（Data-Driven Documents）的简称，不仅可以帮助你将信息转换成图形，而且可以协助你基于数据创建和操作完整的网页和图表。这是一款梦幻般的工具，正是或至少是这个世界亟需的一款数据可视化工具。
D3由斯坦福大学毕业生Mike Bostock联合其导师Jeffery Heer及Vadim Ogievetsky首发于2011年。D3是基于JavaScript这种互联网世界绝对通用语言的一个自由扩展库。D3背后的基本理论是：提供一种方式，将网页上的元素与数据连接起来，然后基于这些数据去操纵网页元素。例如，你想将5个数据点转换成一幅条形图，只需在D3中将这些数据点与5个矩形图形元素连接，然后根据对应的数据值设置矩形的宽度即可——真是简单到极致了。
写作目的和读者群
好吧，这样说也不十分准确。D3不是那么简单的。它功能很强大，但学习起来也很有挑战性。幸运的是，网上有很多D3教程和免费样例，其中不少是Mike Bostock本人写的。然而，虽然有这么丰富而活跃的D3生态，但其入门仍然是需要费一番工夫的——特别是对那些没有JavaScript编程经验的人来说。
我写这本入门书的主要目的是想以无障碍而非面面俱到的方式全面介绍D3的基础知识要点。（假定你对HTML和CSS有一定的经验。如果没有，建议你抓紧时间学习这些基础知识。）我希望这本书可以带你轻松读懂和领会其他代码样例——换句话说，就是非常轻松地走进D3的生态系统。
本书还有一个目的：阐释制作优秀的数据可视化报表的准则。互联网上充斥着糟糕的图表和图形。即使是数据可视化图表，也需要像其他技艺一样，有一组最佳实践和经验积累。从某种意义上说，每一幅可视化图表都在诉说一个故事，所以，如果你计划制作一幅可视化图表，要好好想想你打算讲述什么内容，怎么讲述才最容易打动人——这很关键！希望本书可以在这方面给你一些启示。
目录架构
本书的内容组织非常直观，只是简单地贯穿了一个使用D3制作动态、可交互图形的完整流程，包括图表的初始概念，寻找合适的数据，然后给出一个强大的设计方案。随着内容的推进，每个章节的复杂度会逐渐加深。以下是每章的内容概要。
第1章以图叙事和D3
对数据可视化进行了简单的介绍，解释可视化对提升理解有巨大作用的原因。同时，对D3进行了简单的介绍，解释为何D3会成为Web端数据可视化的利器。
第2章发掘并图解案例
叙述了如何去搜寻一组有故事性的数据，包括相关数据准备及可视化样式制作指导，其中的示例“世界人口年龄分布柱形交互图”贯穿本书。
第3章可缩放矢量图形
介绍了可缩放矢量图形（SVG）。这是一种创建美观图形元素的Web标准，D3可以很轻易地操纵这些元素。本书部分示例是用SVG绘制的。
第4章用D3选择集操控网页
开始接触D3并学习用D3选择页面元素是本章的主题。第3章中的SVG图表会在本章中用D3重建。
第5章数据连接：进入
对D3的核心概念“数据连接”进行了详细介绍。同时，用“数据连接”重建了第4章的示例。
第6章缩放图形并添加轴线
介绍D3用来自动进行图形缩放和生成坐标轴的方法，并在示例中进行了应用。
第7章加载并过滤外部数据
从外部独立数据源创建图表可能是D3的主要实际使用场景。本章介绍了如何加载外部数据，以及D3采用异步方式加载数据的原因。
第8章为图形添加交互和动画效果
给示例添加交互按钮（数据集中每一年对应一个按钮）。当按钮被点击时，柱形图中的每一个柱形会按照实际的数据值进行水平缩放，并产生过渡动效。
第9章添加播放按钮
播放按钮一旦被点击，就会在数据集中轮播每一年的数据。
第10章修行靠自身
本书最后以教你如何正确进入D3生态系统结尾。
附录A JavaScript入门
为初学者提供与JavaScript基本概念相关的指导。
附录B 整理人口分布数据
手把手教你如何下载、整理本书示例中的数据。
约定
代码列表、内联代码和方法名称将使用等宽字体，如this。
结束语
写作本书时，我还只是一个D3的初学者。我这么说的原因有两个：一个原因是，以前困扰我的这些D3知识点在我脑海里仍然很清晰，我可以尽我所能在本书中表达清楚，我希望我做到这一点了；另外一个原因是，既然我能办到，那么我相信你也可以。

致谢

首先，我需要感谢我的妻子Emily Elert，在无数个周末为我精心制作午餐，料理家务，这样我才能专心写作。本书应当献给她，但这还远远不够。她是我最需要感谢的人。我其实并没有意识到，当我全身心投入写作时，我们悠闲的小日子没时间过了，但她似乎早有心理准备，对我耐心又体贴，从未将她的压力宣泄给我，并依然答应嫁给我，给了我最大的惊喜。
此外，我还要真心感谢丛书编辑Paul Dix。本书，至少我的写作经历，在一次与他轻松友好的谈话后确定下来。Paul既是我好友的未婚夫，也是我研究生院的校友。某天晚上，我们喝酒聊天，畅谈编程。我说我已经沉浸在D3中不可自拔。他打断我并问道：“你是一个记者？”“是的。”我回答。Paul沉默了一会儿，然后神秘地问道：“你想写一本关于D3的书吗？”Paul，谢谢你给了我这次机会。
当然，我还要感谢我的编辑Debra Williams Cauley，她充分展示了把握节奏的能力，刺激我不断向前，否则我这些写书的时间会浪费在各种慈善寿司午宴上。在本书的整个写作过程中，她还帮助我对校审的具体反馈进行分类。
说到校审，真的很有必要感谢他们。Kevin Quealy、Robert Mauriello及Josh Peek对本书的原稿提供了反馈。Robert对计算机领域的相关概念进行把关，确保本书不失专业性。Alli Treman和Sasha Mendez非常细致，不放过任何一行代码，抓出了不少低级错误。特别是Lynn Cherny，给了我很多有深度的建议，这无疑将本书的品质提升了一个档次。
还要特别感谢Chris Zahn，容忍我在从原稿到最终发布的过程中不断犯错。原稿中有些章节的格式惨不忍睹，他都能帮忙整理清楚，态度还非常友善。
回顾本书的整个出版过程，不得不多提一下Kevin Quealy和Amanda Cox。他们不仅让我对数据可视化产生了浓厚的兴趣（他们关于数据新闻学的教学是如此让人惊艳，我在纽约大学受教了），也对我的职业发展一路提携。我欠他们太多。他们真的是无与伦比。
我还想感谢David Yanofsky，他是我在Quartz工作时“二人图形组”中的另一个。他教给我很多关于D3和JavaScript的知识，并帮助我制作了自己的第一个交互式图表。他还是一个无可救药的段子手，我很尊敬他。谢谢你，兄弟。
最后，但绝不仅限于此，我还要感谢Mike Bostock编写了一个如此美妙的JavaScript库，用于制作基于Web的数据可视化。他还不断制作优雅、美观的样例，以帮助我们汲取D3的全部能量。谢谢你，牛人！