本书阐释了制作可视化数据图表的基本方法论，以及如何结合D3高效、快速地创建可视化图表。
本书以一个故事开始，阐释制作可视化数据图表的基本方法论，以及如何结合D3高效、快速地创建可视化图表。本书首先解释了可视化的基本涵义，以及D3的适用人群，然后从一个具体的例子入手，告诉我们如何去挑选合适的数据集，以什么样的形式来展现数据，同时对SVG进行了基础铺垫。在D3部分，本书介绍了D3的核心概念“选择集”与“数据连接”，同时对数据连接的几个经典场景进行了演绎，还结合D3介绍了绘图所要掌握的坐标系统、比例尺等基本概念。在数据加载方面，本书讲解了D3可以解析的多种数据格式，以及从后端加载数据的多种方法，同时解释了D3动画的制作方式，为制作交互式图表奠定了基础。最后，本书揭示了掌握D3的不二法门，并希望读者能够不断实践、持之以恒。全书写作风格生动有趣、内容通俗易懂，既适合D3初学者入门，也有助于有一定经验的前端开发者快速掌握D3。
推荐序
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
丛书主编
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 发掘并图解案例 13
2．1 开始 13
2．2 世界正在变老吗 14
2．3 发现并研究数据 15
2．4 打磨概念 18
2．5 选择形式 19
2．5．1 用柱形图展示数据 19
2．5．2 用堆积柱形图展示数据 20
2．5．3 用线图展示数据 22
2．5．4 用饼图展示数据 23
2．5．5 用条形图展示数据 25
2．5．6 用多个微型条形图展示数据 26
2．5．7 选图建议――思维导图 28
2．6 本书将构建的例子 30
2．7 小结 31
3 可缩放矢量图形 33
3．1 原理一瞥 33
3．2 到底什么是SVG 33
3．3 用D3绘制圆形 34
3．4 在Web Inspector中查看SVG 36
3．5 通过CSS改变SVG元素的风格 37
3．6 其他图形 39
3．6．1 矩形 39
3．6．2 圆角矩形 40
3．6．3 圆形 40
3．6．4 椭圆 41
3．6．5 多边形 41
3．6．6 线 42
3．6．7 路径 42
3．7 SVG文本 43
3．8 SVG样式属性 46
3．8．1 颜色和透明 46
3．8．2 笔触属性 47
3．9 绘图顺序和编组 49
3．10 变形 51
3．11 用SVG构建条形图 53
3．12 小结 66
4 用D3选择集操控网页 67
4．1 配置D3 67
4．2 选择元素 68
4．2．1 使用CSS选择器创建选择集 71
4．2．2 从其他选择集中新建选择集 72
4．2．3 将选择集赋值为变量 72
4．3 通过选择集修改属性 72
4．3．1 attr()的工作原理 74
4．3．2 使用attr()应用样式类和规则 76
4．4 声明式的D3 77
4．5 链式方法调用 77
4．5．1 在链式调用过程中新建选择集 79
4．5．2 链式调用和变量赋值 80
4．6 添加元素 80
4．7 串在一起 82
4．8 用d3．selectAll()选中多个元素 84
4．9 使用选择集制作条形图 85
4．9．1 使用变量 96
4．9．2 数学运算 98
4．9．3 使用更好的变量 98
4．9．4 为数据使用变量 99
4．9．5 进行显式约束 100
4．9．6 使用循环 101
4．10 小结 107
5 数据连接：进入 109
5．1 什么是数据连接 109
5．2 数据连接的核心概念：进入 110
5．3 进入并绑定数据 112
5．4 使用数据连接制作条形图 115
5．5 使用匿名函数访问绑定数据 120
5．6 完成图形的剩余部分 123
5．7 在对象中存储数据 123
5．8 小结 129
6 缩放图形并添加轴线 131
6．1 线性比例尺 131
6．2 灵巧地使用边距规范 137
6．3 添加坐标轴 139
6．4 序数比例尺和坐标轴 147
6．5 小结 160
7 加载并过滤外部数据 161
7．1 使用人口分布数据构建图形 161
7．2 D3兼容的数据格式 162
7．3 创建服务器并上传数据 163
7．3．1 通过命令行初始化服务器 163
7．3．2 创建索引文件 164
7．4 D3加载数据的方法 165
7．4．1 回调方法 165
7．4．2 D3如何解析CSV表格 166
7．5 处理异步请求 169
7．5．1 用外部数据创建条形图 170
7．5．2 优化条形图 172
7．6 加载和处理大（超大）数据集 175
7．7 合并内容 178
7．8 小结 180
8 为图形添加交互和动画效果 181
8．1 数据连接：更新和退出 181
8．2 交互按钮 185
8．2．1 用数据连接创建按钮 186
8．2．2 让按钮更方便点击 192
8．3 更新图形 195
8．4 添加转场动画效果 199
8．5 使用键 200
8．6 小结 202
9 添加播放按钮 203
9．1 在方法中封装更新阶段 203
9．2 在页面上添加播放按钮 207
9．3 点击播放 209
9．4 允许用户中断播放 212
9．5 小结 217
10 修行靠自身 219
10．1 本书是学习D3的基础 219
10．2 如何克服障碍 220
10．3 持续编码 222
10．4 小结 222
附录A JavaScript入门 223
A．1 JavaScript简介 223
A．2 浏览器中的JavaScript控制台 223
A．3 基本运算、变量及数据类型 224
A．4 在页面和．js文件中编写JavaScript代码 227
A．5 数组和对象 229
A．6 方法和函数 232
A．7 if语句和for循环 233
A．8 调试 237
附录B 整理人口分布数据 241
