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

译者注
上一节我们探讨了 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 出现以后,社区的主要精力更多集中在探索图形相关的语法,以及如何通过代码来实现日益复杂的动态图表。如今我们已经到达一个新的阶段,在这个特定阶段中,各行各业都能看到大量的数据可视化案例(无论是商业智能、新闻报刊业、抑或是数据科学,比比皆是);对于这些可视化作品的期望,各领域早年间看起来非常明显的界限也在慢慢消融,并逐渐趋于一致——不再专注于新奇的图表,而是聚焦更多具有整合意义的可视化解决方案,让拥有不同技能与期望的不同角色,共同参与到同一个基于数据驱动的可视化产品研发中来。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

c++边界处理机制

1.vector std::vector&#xff1a;std::vector 是动态数组&#xff0c;它会在运行时动态地调整存储空间大小&#xff0c;因此当访问超出边界时&#xff0c;会触发运行时异常 std::out_of_range。可以通过try-catch块来捕获这种异常来处理越界访问。 #include <iostream>…

Mybatis数据封装

目录 解决方案&#xff1a; 1.起别名&#xff1a; 2.手动结果映射&#xff1a; 3.开启驼峰命名(推荐)&#xff1a; 我们看到查询返回的结果中大部分字段是有值的&#xff0c;但是deptId&#xff0c;createTime&#xff0c;updateTime这几个字段是没有值的&#xff0c;而数据…

项目管理系统厂商:奥博思发布《项目管理系统助力 IPD 高效落地》演讲

一场题为&#xff1a;“标准为基&#xff0c;项目之上 &#xff0c;持续提升 PMO 卓越中心”的全国 PMO 专业人士年度盛会在京召开。会议围绕 PMO 卓越中心能力提升、项目管理标准化、项目管理体系建设等核心话题力邀业界专家、卓有建树的 PMO 实践精英来演讲、交流、分享。 奥…

无人机在航拍领域有哪些独特优势?

那肯定是便宜啊&#xff0c;相比传统的飞机或直升机航拍作业&#xff0c;无人机航拍具有更快的响应速度和更低的成本。无人机可以随时随地进行起降&#xff0c;并在短时间内完成航拍任务&#xff0c;极大地提高了作业效率。同时&#xff0c;无人机的运营成本相对较低&#xff0…

C语言快速学习笔记

学习网站&#xff1a;C 语言教程 | 菜鸟教程 (runoob.com)C 语言教程 | 菜鸟教程 (runoob.com)C 语言教程 | 菜鸟教程 (runoob.com) 这个网站知识完整&#xff0c;讲解清晰。 在线C语言编程工具&#xff1a;菜鸟教程在线编辑器 (runoob.com) 国外学习网站&#xff1a;C语言介…

nanodiffusion代码逐行理解之time embedding

目录 一、time embedding调用过程二、time embedding定义过程三、PositionalEmbedding定义过程 time embedding本质上就是把时间步t转换为指定维度的嵌入向量&#xff0c;这个向量由时间步 &#xff0c;向量维度&#xff0c;周期等参数决定&#xff0c;可以简单理解为根据时间步…

说说硬件调试中发现的那些低级错误

高速先生成员--周伟 最近遇到很多debug相关的咨询&#xff0c;曾经我们说过&#xff0c;我们做过的板子越多&#xff0c;遇到问题的概率也越多&#xff0c;很多别人没遇到过的问题&#xff0c;说不定我们早就触过雷&#xff0c;从而类似的问题形成经验总结&#xff0c;就不会再…

Python知识点背诵手册,超详细知识梳理

一、手册介绍 《Python知识点背诵手册》是一份详尽的Python学习资料&#xff0c;旨在帮助学习者系统地掌握Python语言的基础知识和进阶技能。该手册将Python的所有关键语法和概念进行了精炼的总结&#xff0c;并以易于理解和记忆的方式呈现。以下是手册的主要特点和内容概述&a…

石墨烯分散液制备方法众多 应用领域广泛

石墨烯分散液制备方法众多 应用领域广泛 石墨烯分散液指将石墨烯纳米片均匀分散在特定溶剂中制成的溶液。石墨烯分散液具有化学稳定性好、生物相容性好、热稳定性好等优势&#xff0c;未来有望在涂料、纤维制品、电池制造、油墨等领域获得广泛应用。 石墨烯分散液以石墨…

AWS云创建EC2与所需要注意事项

AWS云&#xff08;Amazon Web Services&#xff09;作为全球领先的云计算服务提供商&#xff0c;为用户提供了丰富的云计算服务。其中&#xff0c;EC2&#xff08;Elastic Compute Cloud&#xff09;是AWS云中的一项重要服务&#xff0c;可以帮助用户轻松创建和管理虚拟服务器实…

从0开始搭建vue项目

#先查下电脑有没有安装过node和npm node -v npm -v #安装vue npm install -g vue #安装webpack npm install webpack -g 都安装好后&#xff0c;进入你想创建的文件夹内 创建名字&#xff1a;vue init webpack <project_name> 就默认回车 然后根据项目需求Y/n 比如…

提升学历的最佳选择:深职训学校的成人大专远程教育

你有没有想过&#xff0c;一边工作一边提升自己的学历&#xff1f;很多人都觉得这是一件不可能完成的任务&#xff0c;但今天我要告诉你&#xff0c;其实有一个不错的选择&#xff0c;那就是深职训学校的成人大专远程教育。 深圳提升学历www.shenzhixun.com 为什么要选择成人大…

难道 Java 已经过时了?

当一门技术已经存在许多年了&#xff0c;它可能会失去竞争力&#xff0c;而后黯然退场&#xff0c;默默地离开&#xff0c;这对大部分的人来说就已经算是过时了。 Java 于 1995 年正式上线&#xff0c;至今已经走过了 27 个年头&#xff0c;在众多编程技术里算是年龄比较大的语…

开箱机视觉系统大揭秘:如何轻松辨别千差万别的包装?

在现代物流仓储领域&#xff0c;开箱机作为提升作业效率的关键设备&#xff0c;正日益受到行业的重视。而开箱机的视觉系统更是其十分强大&#xff0c;能够准确辨认不同包装&#xff0c;确保物流作业的高效与准确。与星派深入探究一下开箱机视觉系统是如何工作的&#xff0c;以…

2007-2023年36家商业银行绿色信贷、期末贷款总额、银行总资产等相关指标数据(2023年无缺失)

2007-2023年36家商业银行绿色信贷数据&#xff08;2023年无缺失&#xff09; 1.时间&#xff1a;2007-2023年&#xff0c;2023年无缺失 2.来源&#xff1a;银行年报和社会责任报告 3.指标:绿色信贷余额、期末贷款总额、绿色信贷比率、总资产收益率、流动性比率、拨备覆盖率、…

烧烤店外卖小程序开展的用途有什么

同城餐饮业里烧烤绝对是年轻人的最爱&#xff0c;各式各样的餐品种类垂涎欲滴、让人忍不住多次消费&#xff0c;当然同行门店数量也非常多&#xff0c;在长期发展中&#xff0c;构建自己的私域平台运营和赋能客户直接消费的路径也不可少。 到店和外卖是主要生意开展形式&#…

2.2.3 C#中显示控件BDPictureBox 的实现----控件实现

2.2.3 C#中显示控件BDPictureBox 的实现----控件实现 1 界面控件布局 2图片内存Mat类说明 原始图片&#xff1a;m_raw_mat ,Display_Mat()调用时更新或者InitDisplay_Mat时更新局部放大显示图片&#xff1a;m_extract_zoom_mat&#xff0c;更新scale和scroll信息后更新overla…

猫头虎分享[可灵AI」官方推荐的驯服指南-V1.0

猫头虎分享[可灵AI」官方推荐的驯服指南-V1.0 猫头虎是谁&#xff1f; 大家好&#xff0c;我是 猫头虎&#xff0c;别名猫头虎博主&#xff0c;擅长的技术领域包括云原生、前端、后端、运维和AI。我的博客主要分享技术教程、bug解决思路、开发工具教程、前沿科技资讯、产品评…

公路道路救援师傅入驻派单小程序开发

道路救援入驻与派单系统小程序开发——面向专业市场的解决方案。 在构建道路救援服务的数字化生态系统中&#xff0c;一款高效、用户友好的入驻与派单小程序显得尤为重要。该小程序旨在无缝连接救援服务师傅和需要道路救援的用户&#xff0c;通过一系列精心设计的功能模块&…

经典文献阅读之--WidthFormer(基于Transformer的BEV方案量产方案)

Tip: 如果你在进行深度学习、自动驾驶、模型推理、微调或AI绘画出图等任务&#xff0c;并且需要GPU资源&#xff0c;可以考虑使用UCloud云计算旗下的Compshare的GPU算力云平台。他们提供高性价比的4090 GPU&#xff0c;按时收费每卡2.6元&#xff0c;月卡只需要1.7元每小时&…