数据可视化实战：使用D3设计交互式图表（第2版）

第 1 章　引言

1.1　为什么要将数据可视化

当下的信息时代，往往让人觉得信息过剩。铺天盖地的信息让人应接不暇。我们必须用某些方法处理原始数据，才能从中提取出有价值的内容。

幸好我们人类是视觉极为敏感的生物。很少有人能看出一堆数字里的模式，但即便是小孩也能看懂条形图，并根据图形弄懂数字的含义。因此，数据可视化成为了一种强大的表现手段，可视化数据成为了与人交流的最快捷的方式。

当然，数据可视化和语言文字一样，可以欺骗、误导人，甚至扭曲事实。但只要真诚、仔细地实践，可视化就能够帮助我们从全新的角度认识世界，从周围隐藏的信息中发现未知的模式和趋势。运用得当的话，数据可视化是可以开口讲故事的。

按字面意思，可视化就是把信息映射成图形的过程。我们设计规则来解释数据，用图形属性表达数据值。例如，图 1-1 中这个简单的条形图就是根据一条非常简单的规则生成的：数值越大，对应的条形就越高。

图 1-1：数值映射成条形图

由比图 1-1 所示的数值序列更复杂的数据集和更复杂的映射规则所生成的图形也更复杂。

1.2　为什么要编程

手动把数据映射成图形是可行，但效率太低，还很乏味，因此我们通常会借助计算机来提升效率。有了效率才能处理包含数千或数百万条数据的大型数据集；原先靠手动操作要好几年才能完成的映射工作，现在用计算机一会儿就能搞定。还有一点同样重要，我们可以快速验证不同的映射思路，改改规则，然后就能立刻看到重新渲染出来的结果。这个不断重复的“编码 / 渲染 / 评估”的过程，是快速迭代、完善设计的关键。

映射规则集合起着设计系统的作用。计算机负责绘制输出的图形，无须人工参与。人类只负责构思、创作和编写系统规则，最后交给软件来执行。

不巧的是，软件和一般的计算模型很难准确理解人的想法。（说句公道话，很多人其实也不擅长。）计算机是二进制系统，只能识别开关、是否、这个那个、这里那里，而人类是情感丰富、懂得变通的生物。计算机不会迁就我们，只能我们向它妥协。于是，我们不可避免地要努力学习软件的编写，掌握那些非常有限却很精确的语法，因为计算机只能理解这样的语法。

不过，在看到做出来的图形作品那么棒之后，我们就会沉醉在编程的乐趣中。亲眼目睹前所未见的数据可视化效果总是令人激动不已，因此我们会不断地练习，仿佛要从神秘的数据魔瓶里召唤出一位天才视觉魔法师。

1.3　为什么需要交互性

静态可视化只能展示预先合成的数据“视图”，因此要想呈现同一份信息的多个方面，就需要多个静态视图。当必须在一个层面上展示所有可视化元素时，数据维度也会受限。众所周知，静态图片很难恰当地展示多维数据。当不需要其他视图，以及需要在印刷品这种静态媒介上展示时，固定不变的图片才是最理想的选择。

然而，动态可交互的可视化图形能够激发人们亲自探索数据的兴趣。从 1996 年起，大部分交互式可视化工具的基本功能都没怎么变，那时美国马里兰大学的 Ben Shneiderman 率先提出了“可视化信息探索口诀”：先概览全貌，再缩放并筛选信息，然后按需寻找细节。

今天，在许多交互式可视化作品中都能见到这种设计模式。不同功能的组合非常有效，因为不管你只是想浏览或探索一下数据集，还是想从作品中找到某个问题的答案，这种模式都可以胜任。如果交互式可视化作品既能提供数据概览，又能提供细节“挖掘”工具，就能成功地同时发挥很多作用，充分满足不同用户的需求。无论他是刚刚接触相关主题，还是已经非常熟悉数据，都能从中获益。

当然，交互性还能鼓励用户参与，这是静态图片所做不到的。可视化作品配上动画过渡效果和精心设计的界面，会让人觉得探索数据就像玩游戏一样有趣。对于那些原本不关心相关主题和数据的人，交互式的可视化特别适合作为引起他们兴趣的媒介。

1.4　为什么要在 Web 上

看不见的可视化没有意义。让其他人来欣赏你的作品至关重要，而发布到 Web 平台可以最快地把它展示给全世界。只要采用标准的 Web 技术，就意味着任何使用较新浏览器的人都能看到并体验你的作品，无论他们用的是什么操作系统（Windows、Mac OS、Linux、Android、iOS）和设备（笔记本计算机、台式计算机、智能手机、平板计算机）。

最棒的是，本书的一切内容都能用免费工具来实现，你只需要投入时间学习即可。本书讨论的都是符合 Web 标准的开源技术。

避开专用软件和插件，就能确保用各种设备都能查看你的项目，无论台式计算机、平板计算机还是手机，都没问题。你的可视化作品越容易被看到，你的受众就越多，你的影响也就越大。过去几年里，D3（还有 Mike Bostock）一直坚定地只支持 Web 标准，也显著推动了 Web 向前发展；现在几乎没有哪个组织想要基于 Flash 的图表或交互式地图了。

1.5　这是一本什么书

本书介绍 D3 这一强大的定制化 Web 可视化工具，涉及数据可视化、交互式设计以及 Web 开发这三个主题。

我根据自己学习使用 D3 的经验写成了这本书。包括我在内的许多人，接触 D3 时拥有设计、绘图和数据可视化的经验，但不了解编程和计算机科学。

人们觉得 D3 很难学，这么想可不太公平。D3 本身没那么复杂，而它立足的 Web 很复杂。想要熟练使用 D3，需要预先学习一些与它相关的 Web 知识，比如 HTML、CSS、JavaScript 和 SVG。许多人（包括我自己）都是自学这些技术的。自学很好，因为门槛很低，但也会有问题，因为我们不一定每种技术都从头开始学，往往遇到问题就采用一些偏门做法来应付，得过且过。其实，要想充分掌握 D3 的使用，得掌握好这些技术的基础才行。

由于 D3 是用 JavaScript 写的，所以学习 D3 也就意味着学习大量 JavaScript 知识。对很多与数据打交道的人来说，他们就是通过 D3 入门 JavaScript 的（乃至通常所说的 Web 开发）。学习一门新的编程语言已经够难了，更别说用这门语言写出来的工具了。但掌握了 JavaScript，你就可以用 D3 实现一些从未尝试过的有趣想法。你在这门语言和新工具上投入的时间肯定会带来丰厚的回报。

我的目标就是缩短你的学习时间，从而更快开始创作美妙的作品。本书采取由浅入深的方式，先介绍基本概念，再渐渐过渡到更复杂的内容。我不会教你怎么实现某种具体的可视化效果，而是要帮你充分理解 D3 的工作原理，这样你就能利用基础知识做出自己想要的设计。

1.6　读者对象

你可以是一名没有任何基础的初学者，不懂数据可视化，或不懂 Web 开发，甚至两样都不懂。（欢迎欢迎！）也许你是一名记者，想把采访过程中收集的数据通过全新方式展示出来。也许你是一名设计师，绘制静态信息图表可以信手拈来，但你想更上一层楼，掌握 Web 交互式作品的制作。你可以是一名艺术家，对用数据生成艺术作品感兴趣。你也可以是一名程序员，早已熟悉 JavaScript 和 Web，但热切希望学习一个新工具，体验一下可视化设计的乐趣。

无论你是谁，我希望你：

即便以上内容你都不知道或不了解，也不用担心。你只需要多花点时间读读第 3 章，其中介绍了学习 D3 前真正需要了解的知识。

1.7　本书不包含哪些内容

即便如此，本书不是传统的计算机科学教材（然而从第 1 版首次发行至今，它已经被多门计算机科学课程用作教材），也不会深入讲解任何一种 Web 技术（HTML、CSS、JavaScript、SVG）的难点。

本着这个原则，我可能会在书中隐藏一些技术细节，一笔带过计算机科学中重要的基本概念，这可能会让资深软件工程师非常反感。其实没关系，因为本书是为设计师写的。（工程师们注意啦，还是很欢迎你们阅读本书的！）我们会介绍基本概念，当你掌握后可以继续学习更复杂的知识。

我有意没有给出某些问题的全部解决方案，通常只是展示我认为最简单的方案——就算不是最简单，也应该是最好理解的。

我的目标是为大家讲解 D3 的基本概念和方法，因此本书没有围绕特定示例项目来组织（除了第 15 章）。每个人的数据和设计需求都不同。需要你根据最符合自己项目的方式来整合运用这些概念。

1.8　使用示例代码

如果你是超级天才，那么可能不用看任何示例代码就能学会 D3，可以跳过本节接下来的内容。

如果你和我一样，虽然很聪明，但没有到天才的地步，那你最好借助本书随附的示例代码来阅读。看书之前，请到 GitHub 的发布页下载示例文件 1。

1也可到 https://www.ituring.com.cn/book/2062 下载示例代码。——编者注

　这是本书的第 2 版，添加和更新了许多代码示例。请下载发布页上 2.0 版本的代码。本书不同版本的代码示例不同；我已经仔细检查过，确保所有代码同步更新。

普通人通常是点击 ZIP 链接下载包含全部文件的 ZIP 压缩文档，而骨灰级玩家会用 Git 克隆代码。如果你听不太明白后半句话是什么意思，就按照前半句话的意思做好了。

在下载到的压缩文件中，每章的代码文件都放在以相应章名命名的文件夹里，比如：

chapter_04 chapter_05 chapter_06 chapter_07 chapter_08 ...

文件按章组织，因此第 9 章在提到 01_bar_chart.html 时，你就知道这个文件的位置是：d3-book/chapter_9/01_bar_chart.html。

只要不是出于商业目的，你可以随便复制、使用、修改和重用这些示例代码。

如果你发现了示例中的任何错误，欢迎到 GitHub 的 issue 页面反馈，我会尽可能在本书以后的版本中予以修改。

1.9　谢谢你

最后我想说，这本书是我精心撰写的，而且为了保证大家的学习效果反复进行修改。谢谢你选择这本书，希望你能从中学到不少知识，最好能感受到乐趣。