【D3.js in Action 3 精译】1.3 D3 视角下的数据可视化最佳实践（上）

当前内容所在位置

• 第一部分 D3.js 基础知识
  • 第一章 D3.js 简介
    • 1.1 何为 D3.js？
    • 1.2 D3 生态系统——入门须知
      • 1.2.1 HTML 与 DOM
      • 1.2.2 SVG - 可缩放矢量图形
      • 1.2.3 Canvas 与 WebGL
      • 1.2.4 CSS
      • 1.2.5 JavaScript
      • 1.2.6 Node 与 JavaScript 框架
      • 1.2.7 Observable 记事本
    • 1.3 数据可视化最佳实践（上） ✔️
    • 1.3 数据可视化最佳实践（下）
    • 1.4 本章小结

1.3 数据可视化最佳实践

数据可视化从未像今天这样受大众欢迎。内容详实的地图、精心设计的图表、以及系统和数据集的复杂呈现形式不仅仅出现在工作场所，也在我们的娱乐和日常生活中频频露脸。随着数据可视化的日渐普及，各种数据可视化工具库也大量涌现；同时，聚焦提升可读性和理解力的美学规则也在不断丰富和完善。无论是普通大众、专家学者还是决策人员，这些可视化的受众群体已经日渐熟悉了曾一度被认为是极其抽象与复杂的数据趋势呈现。这使得 D3 等工具库不仅广受数据科学家们的青睐，也赢得了记者、艺术家、学者、IT 专业人士甚至数据可视化爱好者们的一致好评。

数据可视化如此丰富的配置选项似乎让人应接不暇，再加上这些流图（streamgraph）、树状图（treemap）或直方图（histogram）的数据集相对容易修改，往往会让人误以为信息可视化更看重设计风格而非数据的实质性内容。幸运的是，业内对于不同的数据类型应该使用哪些图表和方法已经有了十分明确的规定。本书并不打算涵盖数据可视化的所有最佳实践，但会重点介绍其中的部分内容。虽然开发人员使用 D3 是为了给色彩和布局的使用来一次技术革新，但大多数人还是希望这些创建出的数据可视化效果能给实际问题提供实实在在的技术支撑。

在构建您的第一个可视化项目时，如果遇到疑问，记得化繁就简——通常情况下，直方图的展示效果往往比小提琴图更好；直接展示分层网络布局（如树枝图）也比力导向布局的效果更佳。视觉效果越复杂的数据呈现方式往往越能激发观众的兴奋点，但稍有不慎也会导致其过分关注图形的美学特质而非数据本身。打造炫酷而惊艳众人的可视化效果本无可厚非；但也应时刻谨记：任何数据可视化作品的首要目标都是讲好某个故事。询问周围的人们是否理解了你的可视化用意，以及他们是怎样解读的，这是至关重要的一步。需要给他们解释吗？他们能从与产品交互中得出什么结论？故事讲完了吗？

不过，要正确部署信息可视化项目，您应该有所取舍，要对数据和受众有充分的了解。D3 赋予开发者极大的灵活性，但正所谓“能力越大，责任越大”。知道哪些图表更适合表现哪些类型的数据固然是好事，但更重要的是要牢记，如果不从知情的角度精心设计，数据可视化很可能也会带来误导信息。如果要自行设计某款可视化图表，那么充分了解数据可视化的最佳实践则是构建过程中必不可少的一环。最好的学习方法就是查阅知名设计师和信息可视化从业者的优秀作品。虽然所有的相关著作都在探讨这些话题，但其中有几本书我们认为很有参考价值，可以帮助您掌握这些基础知识。以下书目绝不是学习数据可视化的唯一教材，但可以作为很好的切入点：

• 《Better Data Visualizations》（Columbia University Press，2021 年），作者：Jonathan Schwabish（中译本《更好的数据可视化指南》，电子工业出版社）
• 《The Functional Art》（New Riders，2013 年）《The Truthful Art》（New Riders，2016 年） 以及《How Charts Lie》（W.W. Norton，2020 年），作者：Alberto Cairo（第一本中译本《不只是美：信息图表设计原理与经典案例》，第三本中译本《数据可视化陷阱》，作者：阿尔贝托·开罗）
• 《Data Visualisation A Handbook for Data Driven Design》（SAGE，2019 年），作者：Andy Kirk
• 《The Visual Display of Quantitative Information Envisioning Information》（Graphics Press，2001 年），作者：Edward Tufte
• 《Designing for Information》（Rockport，2013 年），作者：Isabel Meirelles
• 《Pattern Recognition》（已发表论文，2008 年，罗德岛设计学院），作者：Christian Swinehart
• 《Visualization Analysis and Design》（A K Peters，2014 年），作者：Tamara Munzner

在阅读数据可视化方面的文献资料时，有一点需要牢记：这些文献通常侧重于静态图表。有了 D3，您就可以制作出交互式的动态可视化效果。设计一些交互不仅能使可视化作品可读性更强，还能显著提高其吸引力。即使只有几个鼠标事件，那些感觉自己是在主动探索而非单纯阅读的用户也可能会发现可视化的内容比阅读静态内容更引人注目、也更令人难忘。但增加这样的复杂性需要对用户体验有所了解。本书将在第 7 章中予以详细介绍。

第一章正文内容到这里就全部结束了！虽然还没能用上 D3，但您现在也应该掌握了入门所需的全部基础知识。如果仍不确定该在可视化项目中使用哪种 SVG 元素，或者对于 JavaScript 如何操作数据还不太熟悉，请继续阅读并回顾本章相关内容。从下一章开始，我们将着手创建 D3 可视化项目。

译注
本篇 1.3 小节正文部分虽然到此结束，但随后是一篇作者与可视化设计师及开发者做的人物专访记录，篇幅较长，故此单独整理到下一篇，敬请期待。
另外，本小节作者提到的很多可视化经典著作很遗憾都没有中译本，有需要的读者可以根据出版社信息及发行年份，参阅相应的英文原版。