【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 数据可视化最佳实践

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

如此丰富的选项似乎让人应接不暇,而且修改数据集以在流图、树状图或直方图中显示相对容易,这往往会让人认为信息可视化更注重风格而非内容。值得庆幸的是,对于不同的数据类型,应该使用哪些图表和方法已经有了明确的规定。本书并不打算涵盖数据可视化的所有最佳实践,但我们会介绍其中的一些。虽然开发人员使用 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 小节正文部分虽然到此结束,但随后是一篇作者与可视化设计师及开发者做的人物专访记录,篇幅较长,故此单独整理到下一篇,敬请期待。
另外,本小节作者提到的很多可视化经典著作很遗憾都没有中译本,有需要的读者可以根据出版社信息及发行年份,参阅相应的英文原版。


http://www.niftyadmin.cn/n/5548436.html

相关文章

有没有文字转语音的软件?轻松搞定文字转语音的工具

当文字跃然纸上,它们是静止的,沉默的。 但想象一下,如果这些文字能够被赋予声音,它们将如何生动地跳跃在我们的耳边?在这个充满无限可能的时代,文字转语音技术正将这种想象变为现实。它不仅让我们的阅读体…

智能微服务调度:Eureka中的区域感知性配置指南

智能微服务调度:Eureka中的区域感知性配置指南 引言 在构建全球分布式系统时,服务的可用性区域感知性是确保用户体验和系统弹性的关键因素。Eureka,作为Netflix开源的服务发现框架,提供了区域感知性配置,允许服务消费…

Android IdleHandler源码分析

文章目录 Android IdleHandler源码分析概述前提基本用法源码分析添加和删除任务执行任务 应用场景 Android IdleHandler源码分析 概述 IdleHandler是一个接口,它定义在MessageQueue类中,用于在主线程的消息队列空闲时执行一些轻量级的任务。IdleHandle…

大模型/NLP/算法面试题总结3——BERT和T5的区别?

1、BERT和T5的区别? BERT和T5是两种著名的自然语言处理(NLP)模型,它们在架构、训练方法和应用场景上有一些显著的区别。以下是对这两种模型的详细比较: 架构 BERT(Bidirectional Encoder Representation…

井字游戏00

题目链接 井字游戏 题目描述 注意点 1 < board.length board[i].length < 100输入一定遵循井字棋规则 解答思路 如果某一方想要获胜&#xff0c;则其需要占满某一行或某一列或对角线&#xff0c;所以只需要根据第一行和第一列判断是否填充完某一行或某一列或对角线…

白骑士的C++教学基础篇 1.4 函数

系列目录 上一篇&#xff1a;白骑士的C教学基础篇 1.3 控制流 函数是编程中的基本构建块之一&#xff0c;它允许我们将代码组织成逻辑单元&#xff0c;提高代码的可读性和可维护性。C中的函数提供了丰富的功能&#xff0c;包括函数定义与调用、函数参数与返回值、函数重载和内…

获取商铺信息,以及商铺信息的增删改查

本文章主要讲述如何对商铺信息进行基本的增删改查操作&#xff0c;及数据库对比。 1、获取首页仪表盘统计数据接口 待收费金额&#xff1a; SELECT count(1) as count,IFNULL(sum(total),0)as sum FROM payment_bill WHERE enabled_mark 1 AND pay_state0 欠费数据&#xf…

ArkUI开发学习随机——B站视频简介页面,美团购买界面

案例一&#xff1a;B站视频简介页面 代码&#xff1a; build() {Column(){Column(){Stack(){Image($r("app.media.genimpact")).width(200).height(125).borderRadius({topLeft:5,topRight:5})Row(){Image($r("app.media.bz_play")).height(24).fillColor…