摘要

介绍了当前热门的基于浏览器的数据可视化库D3，它可以把数据加载到网页中并给予数据生产各种图表。要看懂这本书，之前有没有编程经验不太重要。也许你写过程序，也听说过JavaScript 语言的各种传闻，那你可以从D3和数据可视化入手，，跟JavaScript亲密接触。

数据可视化实战 使用D3设计交互式图表 内容简介

你手头有一些数据，想做成漂亮的图表放到网站上？好主意，通过浏览器来跨平台实现数据可视化是正确的选择。什么，你还想让图表能够响应用户操作？没问题，交互式图表比静态图片更能吸引人去探究本源。好啦，要生成通过浏览器展示的动态图表，目前热门的Web数据可视化库——D3。

《图灵程序设计丛书·数据可视化实战：使用D3设计交互式图表》这本书很有意思，而且对读者要求不高。不需要知道什么是数据可视化，也不用有太多Web开发背景就能看懂它。不信？翻一翻就知道这是一本既好玩又实用的动手指南啦！看完这本书你会怎么样呢？

掌握必要的HTML、CSS、JavaScript和SVG基础知识；

学会基于数据在网页里生成元素和为它们设置样式的技巧；

能够生成条形图、散点图、饼图、堆叠条形图和力导向图；

使用平滑的过渡动画来展示数据的变化；

赋予图表动态交互能力，响应用户从不同角度探索数据的请求；

收集数据和创建自定义的地图；

另外，《图灵程序设计丛书·数据可视化实战：使用D3设计交互式图表》100多个代码示例都可以在线浏览！

数据可视化实战 使用D3设计交互式图表 目录

前言

第1章　写在前面

1.1　 数据为什么要可视化

1.2　 为什么要写代码

1.3　 为什么要交互

1.4　 为什么要在Web上

1.5　 这是一本什么书

1.6　 读者是谁

1.7　 这不是什么书

1.8　 使用示例代码

1.9　 谢谢你

第2章　D3简介

2.1　 D3能做什么

2.2　 D3不能做什么

2.3　 起源与背景

2.4　 替代方案

2.4.1　 简易图表

2.4.2　 图谱可视化

2.4.3　 地图映射

2.4.4　 较原始的方案

2.4.5　 三维图形

2.4.6　 基于D3的工具

第3章　技术基础

3.1　 Web（万维网）

3.2　 HTML

3.2.1　 内容和结构

3.2.2　 通过元素来添加结构

3.2.3　 常用元素

3.2.4　 属性

3.2.5　 类和ID

3.2.6　 注释

3.3　 DOM

3.4　 开发者工具

3.5　 渲染与盒模型

3.6　 CSS

3.6.1　 选择符

3.6.2　 属性和值

3.6.3　 注释

3.6.4　 引用样式

3.6.5　 继承、层叠和特指度

3.7　 JavaScript

3.7.1　 Hello, Console

3.7.2　 变量

3.7.3　 其他数据类型

3.7.3　 数学运算符

3.7.4　 比较运算符

3.7.5　 控制结构

3.7.6　 函数

3.7.7　 注释

3.7.8　 引用脚本文件

3.7.9　 JavaScript陷阱

3.8　 SVG

3.8.1　 SVG元素

3.8.2　 简单的图形

3.8.3　 为SVG元素添加样式

3.8.4　 分层与绘制顺序

3.8.5　 透明度

3.9　 关于兼容性

第4章　安装D3

4.1　 下载D3

4.2　 引用D3

4.3　 配置Web服务器

4.3.1　 基于Python的文本终端方案

4.3.2　 MAMP、WAMP和LAMP

4.3.3　 快开始吧

第5章　数据

5.1　 生成页面元素

5.1.1　 连缀方法

5.1.2　 各个击破

5.1.3　 平稳交接

5.1.4　 不要连缀

5.2　 绑定数据

5.2.1　 怎么绑定

5.2.2　 数据

5.2.3　 作出你的选择

5.2.4　 绑定及确定

5.3　 使用自己的数据

5.3.1　 自定义函数

5.3.2　 数据需要拥抱

5.2.3　 添加样式

第6章　基于数据绘图

6.1　 绘制DIV

6.1.1　 设定属性

6.1.2　 关于类

6.1.3　 言归正传

6.1.4　 设定样式

6.2　 data()的魔力

6.3　 绘制SVG

6.3.1　 创建SVG

6.3.2　 数据驱动的图形

6.3.3　 你好，色彩

6.4　 绘制条形图

6.4.1　 老方法生成的条形图

6.4.2　 用新方法改进条形图

6.4.3　 上色

6.4.4　 加标签

6.5　 绘制散点图

6.5.1　 数据

6.5.2　 散点图

6.5.3　 散点大小

6.5.4　 标签

6.6　 更上一层楼

第7章　比例尺

7.1　 苹果和像素

7.2　 值域和范围

7.3　 归一化

7.4　 创建比例尺

7.5　 缩放散点图

7.5.1　 d3.min()和d3.max()

7.5.2　 设置动态缩放

7.5.3　 整合缩放后的值

7.6　 修饰图表

7.7　 其他方法

7.8　 其他比例尺

第8章　数轴

8.1　 数轴简介

8.2　 设定数轴

8.3　 修整数轴

8.4　 优化刻度

8.5　 垂直数轴

8.6　 最后的润色

8.7　 为刻度标签定义样式

第9章　更新、过渡和动画

9.1　 更新条形图

9.1.1　 序数比例尺

9.1.2　 自动分档

9.1.3　 使用序数比例尺

9.1.4　 其他更新

9.2　 更新数据

9.2.1　 通过事件监听器实现交互

9.2.2　 改变数据

9.2.3　 更新视觉元素

9.3　 过渡动画

9.3.1　 持续时间

9.3.2　 缓动函数

9.3.3　 延迟时间

9.3.4　 使用随机数据

9.3.5　 更新比例尺

9.3.6　 更新数轴

9.3.7　 在过渡开始和结束时执行操作

9.4　 其他数据更新方式

9.4.1　 添加值（和元素）

9.4.2　 删除值（和元素）

9.4.3　 通过键联结数据

9.4.4　 添加和删除组合拳

9.4.5　 简要回顾

第10章　交互式图表

10.1　 绑定事件监听器

10.2　 什么是行为

10.3　 分组SVG元素

10.4　 提示条

10.4.1　 浏览器默认提示条

10.4.2　 SVG元素提示条

10.4.3　 HTML的div提示条

10.5　 适应触摸设备

10.6　 更进一步

第11章　 布局

11.1　 饼图布局

11.2　 堆叠布局

11.3　 力导向布局

第12章　 地图

12.1　 JSON与GeoJSON

12.2　 路径

12.3　 投影

12.4　 等值区域

12.5　 添加定位点

12.6　 取得和解析地图数据

12.6.1　 查找shapefile文件

12.6.2　 选择解析度

12.6.3　 简化数据文件

12.6.4　 转换为GeoJSON

第13章　导出文件

13.1　 导出位图

13.2　 导出PDF

13.3　 导出SVG

附录A　 扩展阅读

A.1　 图书

A.2　 网站

A.3　 Twitter

数据可视化实战 使用D3设计交互式图表 精彩文摘

这个信息时代更多地让人觉得它是个信息过剩的时代。铺天盖地般的信息令人目不暇接，很多未经加工的原始信息只有使用某种方法找出其中的规律才有价值。

谢天谢地，我们人类是对图形图像极为敏感的生物。虽然很少有人能从一堆数字中发现趋势，但即使是小孩子也能看懂条形图，并且能从这些图形中明白数字的含义。正因为如此，数据可视化成了一股潮流。可视化数据成为与人沟通的最便捷方式。

当然，数据可视化跟用语言描述一样，都可能“撒谎”、误导人，甚至扭曲事实。不过，只要潜心学习，多加小心，把数据变成生动的图表就能帮我们从一个全新的角度来看懂这个世界，从中揭示出原先隐藏的一些模式和趋势。运用得当，数据可视化是可以开口讲故事的。

如果从字面上来理解，可视化就是把信息映射为可见图形的过程。我们必须总结出一些规则，解读数据，同时把数据变成有形的东西。比如图1-1中这个最基本的条形图吧，它就是根据一个最简单的规则生成的：较大的数值映射为较高的条形。

图形越复杂，数据集越复杂，规则也就越复杂。

手工完成数据到图形的映射不是不行，但效率太低，也太乏味。所以，一般我们都要利用计算机来提高工作效率。效率上来了，才能把时间放在研究更大的数据集上，这样才能处理几千条数据，甚至几百万条数据。这么大的数据量，如果全靠手工得几年，用计算机不过瞬间而已。还有一点同样重要，利用计算机可以快速验证不同的映射思路，改一改规则然后就能即刻看到重新生成的输出结果。这个不断重复的“写代码-呈现-评估”的过程，是快速迭代、设计出最优映射规则的关键。

映射规则发挥的是设计系统的作用，不用人手工描绘，计算机帮我们干。我们人呢，应该把精力放在挖概念、找联系和写规则上面，其他统统让计算机帮我们搞定。

遗憾的是，计算机软件（通常是计算模型）很难精确表达人类的所思所想。（说句公道话，很多人其实也不善于表达自己的想法。）因为计算机是二进制系统，所有一切都是开关、是否、这个那个、这里或非这里。人类作为感性宽厚的生物，在计算机不愿意迁就我们的时候，我们只能迁就它。于是不可避免地，我们就要学习写代码，编软件。我们学着跟计算机沟通，使用非常有限但又很精确的语法，好让计算机能够更好地理解我们。

看见自己做出来的可视化效果那么棒，我们的心都醉了，于是就会继续写代码。而一旦目睹前所未见的可视化效果，我们又欲罢不能，于是就不断重复着这个过程。恰似像神秘的数据魔瓶里跑出来一个天才的视觉魔法师。

静态可视化展示的只是预先合成好的数据“视图”，而要展示相同信息的不同侧面，往往需要多个静态视图。在静态视图中，数据的维度同样也是受限的，因为所有可视化的要素必须同时展示在同一个表面上。要在静态视图中表现多维数据的难度势比登天。固定不变的图像什么时候最合适？除非像印刷或打印时，不需要也没有必要弄一堆视图。

然而，动态的响应式的图形可以激发人们探索数据的欲望。1996年，马里兰大学的Ben Shneiderman 率先在“Visual Information-Seeking Mantra”中提出“先给出一个大小合适、筛选得当的概要，然后根据需要展示细节”，由此开始，大多数交互可视化工具的基本功能就发生了变化。