【D3.js in Action 3 精译】1.1.3 D3.js 的工作原理

news2024/11/25 1:07:33

译者注
上一节我们探讨了 D3.js 的适用场景——需要高度定制化、可以尽情释放想象力的复杂图表。这一节我们再跟随作者的视角,看看 D3.js 的工作原理究竟是怎样的。

1.1.3 D3.js 的工作原理

您可能已经体验过 D3 并且发现它不太容易上手。这也许是因为您把它当成了一款普通的绘图工具库。以本书第 2 章和第 3 章即将重点介绍的柱状图为例,D3 并没有提供现成的单一函数来创建柱状图;相反,它提供了一个用于将 <svg> 容器追加到 DOM(Document Object Model,即文档对象模型)中的函数,以及一组专为每个数据点添加一个 <rect> 元素的函数。然后利用提供的比例尺工具,计算出构成柱状图的各矩形的长度并将其赋给对应的 height 属性。最后再调用另一组函数,将 x 轴和 y 轴添加到柱状图中。

正如图 1.6 所示,整个绘制过程比专用的图表工具库(如 Highcharts)要复杂得多;但把数据和图形放到明面上来处理也恰好是 D3 的优势所在。尽管其他图表库可以很方便地快速绘制线形图和饼图,可一旦想要的可视化效果超出了传统图表的能力边界,或者需要定制开发一些交互逻辑的时候,依靠这些工具库就有些捉襟见肘了。而此时的 D3 则会一枝独秀——它能构建出任何您可以想象出的、基于数据驱动的图形和交互效果来。

图 1.6 使用 Highcharts 和 D3.js 生成柱状图的代码量对比
图 1.6 使用 Highcharts 和 D3.js 生成柱状图的代码量对比。前者更简短,而 D3.js 更加灵活

如图 1.7 所示,这是一张关于如何利用 D3 实现数据可视化效果的通用版思维导图。先是从数据集入手(通常是一个 CSV 或 JSON 格式的数据文件),并利用 d3-fetch 模块将该数据集加载到项目中。通常需要对数据做一些格式化处理,例如数值和日期格式的校验与统一。此外,可能还会考察该数据集的主要统计学特征,例如提前了解其最大值、最小值以备后用。紧接着就是结合本书即将介绍的各类 D3 函数,开始构建想要的可视化效果。最后,通过监听鼠标事件来添加用户交互逻辑,例如让用户自行筛选数据或放大图表。
图 1.7 如何使用 D3.js 进行数据可视化
图 1.7 如何使用 D3.js 进行数据可视化


Elijah Meeks 访谈记录

Elijah Meeks 是 Noteable 公司的联合创始人兼首席创新官(Chief Innovation Officer,即 CIO),同时也是《D3.js 实战》第一版的作者。

问:您能告诉我们一些您的背景信息,聊聊您是怎样进入数据可视化领域的吗?

Elijah Meeks:我曾先后在苹果公司、奈飞(Netflix)公司、数据可视化协会(Data Visualization Society)、斯坦福大学以及合伙创办的 Noteable 公司中从事了近 15 年的数据可视化工作。我以一种不太传统的方式进入的数据可视化领域——起初是通过地理信息系统(Geographic Information System,即 GIS)来支撑我在中国早期国家形成方面的博士课题研究。之后才开始接触网络可视化相关的问题,最终才画起了柱状图和折线图。

问:您是如何发现 D3 的,是什么激励您进一步学习这个工具库?

Elijah Meeks:在我职业生涯的早期阶段,我利用 FlashActionScript3 创建了一些交互式的数据可视化应用。当 Flash 逐渐式微,我便开始探索 Protovis 作为替代方案,不过它很快就被 D3 取代了。我越深入了解 D3,就越深刻理解数据可视化。更重要的是,借助 D3 来实现数据可视化可以帮助我更好地学习数据结构、数据分析和机器学习方面的知识。

问:在 D3 相关资源还不多的时候,您就成功编写了前两版的《D3.js in Action》实战类书籍。这个项目是如何诞生的?

Elijah Meeks:我永远感谢 Manning 出版社给予我编写这些书籍的机会。相对于仅仅将 D3 用于项目实践而言,这项工作迫使我更全面、更深入地去理解D3。撰写 D3 相关的教学内容让我在使用和规划书籍内容方面更加得心应手。第一版内容包括如何利用 D3 来创建 HTML 的示例,几乎是将 D3 视为某种意义上的 MVC(Model-View-Controller)来进行演示的;此外也包括在手机或平板电脑上自定义触摸事件(touch events),以及定制开发自己的布局、生成工具和组件。第二版中删除了部分内容,转而增加了更多实用的知识,例如怎样将 D3 集成到 React 框架等等。

问:在过去十年里,您在数据可视化领域发挥了关键作用。从 Netflix 排名第一的数据可视化工程师、到成为 Noteable 公司的首席创新官,在此期间,您见证了这个行业所经历的重大变革。您是如何看待数据可视化经历的这些演变?未来的数据可视化又将何去何从?

Elijah Meeks:我坚信任何文化都有其特定的时代烙印,数据可视化的相关实践也不例外。我们从计算机最初提供的简单图表的配置选项开始(例如 Excel 图表),利用它们来实现表格数据的可视化;等到 D3 出现以后,社区的主要精力更多集中在探索图形相关的语法,以及如何通过代码来实现日益复杂的动态图表。如今我们已经到达一个新的阶段,在这个特定阶段中,各行各业都能看到大量的数据可视化案例(无论是商业智能、新闻报刊业、抑或是数据科学,比比皆是);对于这些可视化作品的期望,各领域早年间看起来非常明显的界限也在慢慢消融,并逐渐趋于一致——不再专注于新奇的图表,而是聚焦更多具有整合意义的可视化解决方案,让拥有不同技能与期望的不同角色,共同参与到同一个基于数据驱动的可视化产品研发中来。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1861356.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux】使用信号进行进程间通信

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 ​ ​ 实现原理&a…

互联网直播/点播技术与平台创新应用:视频推拉流EasyDSS案例分析

随着互联网技术的快速发展&#xff0c;直播/点播平台已成为信息传播和娱乐的重要载体。特别是在电视购物领域&#xff0c;互联网直播/点播平台与技术的应用&#xff0c;不仅为用户带来了全新的购物体验&#xff0c;也为商家提供了更广阔的营销渠道。传统媒体再一次切实感受到了…

QT学习积累——在C++中,for循环中使用``与不使用``的区别和联系

目录 引出使用&与不使用&除法的一个坑 总结自定义信号和槽1.自定义信号2.自定义槽3.建立连接4.进行触发 自定义信号重载带参数的按钮触发信号触发信号拓展 lambda表达式返回值mutable修饰案例 引出 QT学习积累——在C中&#xff0c;for循环中使用&与不使用&的…

MATLAB算法实战应用案例精讲-【数模应用】线性判别分析(附MATLAB、python和R语言代码实现)

目录 前言 算法原理 什么是判别分析 线性判别分析(LDA) 数学模型 二分类 多分类LDA ​编辑 算法思想: 费歇(FISHER)判别思想 贝叶斯(BAYES)判别思想 LDA算法流程 LDA与PCA对比 SPSSPRO 1、作用 2、输入输出描述 3、案例示例 4、案例数据 5、案例操作 …

新手教学系列——“笑看”单元测试(pytest)

探索单元测试的必要性 你是否曾经思考过,当前的业务场景是否真的需要单元测试?我们每个人负责的模块是否也需要单元测试?什么阻碍了我们进行单元测试呢?时间紧,任务重,还要写测试?这些都是我们在开发过程中常见的问题。假设我们有一个计划开发一周的项目,让我们看看有…

rapidocr-onnxruntime库及在open-webui上传PDF 图像处理 (使用 OCR)应用

背景 rapidocr-onnxruntime是一个跨平台的OCR库&#xff0c;基于ONNXRuntime推理框架。 目前已知运行速度最快、支持最广&#xff0c;完全开源免费并支持离线快速部署的多平台多语言OCR。 缘起&#xff1a;百度paddle工程化不是太好&#xff0c;为了方便大家在各种端上进行oc…

计算机网络课程实训:局域网方案设计与实现(基于ensp)

文章目录 前言基本要求操作分公司1分公司2总部核心交换机配置实现内部服务器的搭建acl_deny部分用户与服务器出口出口防火墙配置 前言 本篇文章是小编实训部分内容&#xff0c;内容可能会有错误&#xff0c;另外ensp对电脑兼容性及其挑剔&#xff0c;在使用之前一定要安装好。…

第100+13步 ChatGPT学习:R实现决策树分类

基于R 4.2.2版本演示 一、写在前面 有不少大佬问做机器学习分类能不能用R语言&#xff0c;不想学Python咯。 答曰&#xff1a;可&#xff01;用GPT或者Kimi转一下就得了呗。 加上最近也没啥内容写了&#xff0c;就帮各位搬运一下吧。 二、R代码实现决策树分类 &#xff08;…

极客之夜 | XCTF国际网络攻防联赛十周年庆典圆满落幕

在数字化浪潮的推动下&#xff0c;网络安全已成为全球关注的焦点。十年磨一剑&#xff0c;XCTF国际网络攻防联赛以其卓越的赛事品质和深远的影响力&#xff0c;成为网络安全领域的一面旗帜。极客之夜&#xff0c;我们齐聚一堂&#xff0c;共同庆祝XCTF的十年辉煌&#xff0c;展…

andon系统及时通知对应处理人员,助力产线快速处理异常

在当今快节奏、高效率的制造业环境中&#xff0c;生产线的稳定运行和快速响应异常情况的能力对于企业的成功至关重要。Andon 系统作为一种先进的生产管理工具&#xff0c;凭借其及时通知对应处理人员的功能&#xff0c;为产线快速处理异常提供了强大的助力。 一、Andon系统组成…

基于springboot+Vue高校宿舍管理系统的设计与实现【附源码】

本科毕业设计&#xff08;论文&#xff09; 基于springbootVue高校宿舍管理系统的设计与实现 目录 摘要 2 第一章 绪论 2 1.1 开发背景 2 1.2 开发意义 2 第二章 系统分析 3 2.1 系统的需求分析 3 2.2 系统开发设计思想 3 2.3系统开发步骤 3 2.4 系统的主要技术 4 2.4.1 B/S系…

分享一个好用的图幅号计算器

如果在你的工作中会分幅处理地图数据&#xff0c;也许这个好用的图幅号计算器能对你有所帮助。 你只需要在该工具中输入经纬度坐标&#xff0c;就可以为你计算出各个比例尺下的图幅号&#xff0c;你可以在文末查看该工具的领取方法。 一个好用的图幅号计算器 该图幅计算器工…

3d渲染软件有哪些(1),渲染100邀请码1a12

3D渲染是把三维模型转成2D图像的过程&#xff0c;领域不同常用的软件也不一样&#xff0c;今天我们就简单介绍几个。 在介绍前我们先推荐一个设计人员常用到的工具&#xff0c;就是网渲平台渲染100&#xff0c;通过它设计师可以把本地渲染放到云端进行&#xff0c;价格也不贵&a…

全景vr交互微课视频开发让学习变得更加有趣、高效

在数字化教育的浪潮中&#xff0c;3D虚拟微课系统操作平台以其独特的魅力和创新的功能&#xff0c;成为吸引学生目光的焦点。这个平台不仅提供了引人入胜的画面和内容丰富的课件&#xff0c;更通过技术革新和制作方式的探索&#xff0c;将课程制作推向了一个全新的高度。 随着技…

基于流量特征DNS隐蔽信道分析方法总结

一、 概述 隐蔽信道是指允许进程以危害系统安全策略的方式传输倍息的通信通道。隐蔽信道在公开的信道掩盖下&#xff0c;采用特殊的编码方式&#xff0c;传输非法或私密的信息而不被人发现。其广泛存在于操作系统、网络系统和应用系统中。对网络信息系统的安全构成了严重威…

U盘数据恢复宝典:从原因到解决方案的全面指南

一、U盘数据恢复概述 在日常生活和工作中&#xff0c;U盘已成为我们不可或缺的数据存储工具。然而&#xff0c;随着数据量的不断增长和使用的频繁&#xff0c;U盘数据丢失的问题也日益突出。U盘数据恢复技术正是在这种背景下应运而生&#xff0c;它通过各种技术手段找回因误删…

妈耶!被夸爆的零售数据分析方案在这里

在竞争激烈的零售市场中&#xff0c;数据分析已成为企业决胜的关键。今天&#xff0c;就为大家揭秘一份备受赞誉的零售数据分析方案——奥威BI零售数据分析方案&#xff0c;它围绕“人、货、场、供、财”五大主题&#xff0c;助力企业精准决策&#xff0c;实现业务增长。 一、人…

从传统到智能:视频汇聚EasyCVR+AI视频监控如何助力仓储的智能化转型

随着物流行业的快速发展和市场竞争的加剧&#xff0c;仓储管理对于保证货物安全、提高运营效率显得尤为重要。传统的仓储监控方式已难以满足现代仓储管理的需求&#xff0c;因此&#xff0c;仓储视频智能监控解决方案应运而生。方案通过集成先进的视频监控技术、智能分析算法、…

【数据结构】栈的定义与实现(附完整运行代码)

目录 一、栈的定义 二、顺序栈 链栈比较 三、栈的实现&#xff08;顺序栈&#xff09; 3.1 ❥ 定义栈结构 3.2 ❥ 初始化 3.3 ❥ 销毁 3.4 ❥ 插入&#xff08;入栈&#xff09; 3.5 ❥ 删除 &#xff08;出栈&#xff09; 3.6 ❥ 获取栈顶元素 3.7 ❥ 判空 3.8 ❥…

Linux操作系统进程同步的几种方式及基本原理

1&#xff0c;进程同步的几种方式 1.1信号量 用于进程间传递信号的一个整数值。在信号量上只有三种操作可以进行&#xff1a;初始化&#xff0c;P操作和V操作&#xff0c;这三种操作都是原子操作。 P操作(递减操作)可以用于阻塞一个进程&#xff0c;V操作(增加操作)可以用于…