用JavaScript实现数据可视化

本文是翻译,版权归原作者所有


现在很难忽略我们生活中数据的重要性了。数据对于人类历史中的最大的社会组织是至关重要的,最不济它能影响到我们的日常决定。它的集合具有世界范围内的地缘政治影响。然而忽略数据本身貌似正变得更加容易了。我们的调查显示,我们系统收集的99.5%的数据被浪费了,从来没人有效地分析过它。

数据可视化是填补这一空白的工具。

有效的可视化澄清;它们把抽象的古董(熟知的数字)转换成浏览者快速领会和理解的形状和图表。事实上,最好的可视化,是在潜意识地传递这个理解。浏览者立即就领会了数据——不用思考。这种呈现把浏览者解放出来,让他们更加专注地考虑数据的意义:它讲述的事实,揭示的见解,甚至提供的警告。当然,它定义了最好的沟通类型。

如果今天你正在开发网站或web应用程序,就有一个表达数据的好机会,这些数据需要良好的可视化。但是,你怎么知道哪种可视化是合适的?甚至更重要的是,你该如何真正创建?这些问题的答案正是本书的核心。在下面的章节里,我们探索了很多可视化、可视化技术与工具集。每个例子讨论了可视化的适用范围(建议了可能的替代产品),并提供了把可视化包含在你自己网页里的、一步一步的操作。

为了让你快速了解这本书,我们对于 这本书是什么、以及不是什么 做了简介。

实现 VS 设计

本书没有教你如何设计数据可视化。老实讲,其他作者比我们更有资格做这项工作。(比如,你一定比Edward Tufte做得差多了)不过,我们关注实现可视化。适当的时候,我们从稍微宏观的视角讨论下具体的可视化策略的适用范围,不过我意识到,有时候老板绝对坚持饼图。

代码 VS 样式

正如你根据标题所猜测的,本书致力于创建可视化的JavaScript代码。我们不会花太多时间讨论这些可视化的样式。幸运的是,为可视化设置样式和为其他网页内容设置样式,是完全一样的。HTML和CSS的基础经验对你在网页中添加可视化是有极大帮助的。这些例子没有假定你是JavaScript专家,我们确信理解、并小心地解释比基本的jQuery复杂的任何代码。

简单 VS 复杂

书中大部分例子是简单的、直接的可视化。复杂的可视化是让人着迷、不可抗拒的,但是学习太多的高级代码通常不是学习这门手艺的最佳方法。在我们的例子里,我们尽可能保持简单,让你清晰地看到如何使用各种工具和技巧。简单并不意味着“令人厌烦”,因为,即使是最简单的可视化,也是有启迪性和趣味的。

现实 VS 理想世界

当你开始构建自己的可视化,你会发现现实世界很少与我们期望的一样和谐。开源类库有bug;第三方服务器有安全漏洞,不是每个用户都会更新到最新的、最伟大的web浏览器。在这些例子中,我们没有忽视这个现实。在实践中如何兼容低版本浏览器,如何遵循像CORS【注1】之类的安全限制,如何在其他人的代码里与bug共存。

示例的源代码

为了保证文字尽可能清晰和可读性,这些例子通常包含了JavaScript孤立片断,还有偶尔的HTML或CSS片断。所有例子完整的源代码在GitHub上可获得。

致谢

译文:用JavaScript实现数据可视化 》| 腊八粥