【D3.js in Action 3 精译】第一部分 D3.js 基础知识

news2024/11/8 4:50:53

第一部分 D3.js 基础知识

欢迎来到 D3.js 的世界!可能您已经迫不及待想要构建令人惊叹的数据可视化项目了。我们保证,这一目标很快就能达成!但首先,我们必须确保您已经掌握了 D3.js 的基础知识。这一部分提到的概念将会在您后续的 D3 之旅中反复出现,深入理解这些知识点将助您在今后面对复杂的可视化作品和效果时更加游刃有余。

本书第一章不仅会探讨选择 D3 及其相关生态的原因和场景,还会介绍一些基本概念以支撑您的后续学习,包括:绘制 SVG 图形、利用 JavaScript 操作数据以及方法的链式调用。

接下来的第二章、第三章,我们将利用 D3 来构建一个柱状图。为此,还会介绍 DOM 操作以及数据处理的相关知识。第四、五章还将利用 D3 的图形及布局生成器来构建更复杂的可视化作品。最后还会探讨一个几乎所有数据可视化从业者都绕不开的话题——分布(distributions)。


第一章 D3.js 简介

本章概要

  • 理解 D3.js 的作用及其背后的设计理念
  • 认识与 D3.js 结合并用于创建数据可视化的相关工具
  • 借助代码创建并美化可缩放矢量图(SVG)
  • 了解数据可视化最佳实践,助力 D3.js 开发之路

鉴于过去十年来市面上涌现出了大量的数据可视化工具,您可能会怀疑 D3 这趟浑水是否还值得一试。咱们就开门见山吧——当下学习 D3 仍然是一个明智的投资之举。尽管 D3 的学习曲线可能会比较陡峭,并且需要付出坚持不懈的努力;但您最终收获的,将不仅仅是其他工具库所提供的各类传统图表的开发能力,此外还能随心所欲地对其进行定制化改造,更重要的是可以实现数据可视化意义上的创作自由,真正打破常规藩篱、直击数据本质、打造出完美贴合受众需求的精品佳作。

D3.js 是互联网上大多数振奋人心的数据可视化作品背后的工具库。无论是制作用于研究的交互式原型、还是绘制响应式的数据仪表盘、抑或是讲述长篇数据故事(例如 Maarten Lambrechts 的作品《布达佩斯、华沙和立陶宛为何一分为二》(“Why Budapest, Warsaw, and Lithuania split themselves in two”),如图 1.1 所示),当您希望拥有完全的创意自由与技术自由时,D3 必将是您的首选工具。

图 1.1 D3 开发者可以访问像地图这样的各种数据格式
图 1.1 D3 开发者可以访问像地图这样的各种数据格式。图为 Maarten Lambrechts 的作品示例(https://pudding.cool/2019/04/eu-regions/)

本书第一章将介绍 D3 的生态系统,以及在深入探讨数据可视化相关主题前一些至关重要的核心概念,如 SVG 图形、JavaScript 对象操作方法等。

注意

“D3.js”与“D3”的叫法将贯穿全书。二者交替使用,不作区分。

1.1 何为 D3.js?

D3.js,代表 数据驱动文档(Data-Driven Documents,是由 Mike Bostock 于 2011 年创建的一款开源 JavaScript 库,用于生成基于 Web 的动态交互式数据可视化效果。自从 D3 问世以来,许多新的数据可视化工具库相继走进大众视野,但其底层往往都用的是 D3,足见其强大的功能与灵活性。

1.1.1 Web 可访问数据的可视化需求

D3 的诞生就是为了满足可在 Web 端访问的、复杂数据可视化的迫切需求。假设您的公司正使用的一款商业智能工具无法提供团队需要的数据呈现形式。他们希望针对您特定领域构建出一款定制化的仪表盘,用来准确展示客户行为。该仪表板要求反应灵敏、交互良好,并且能在全公司范围内共享。这种情况下,D3 将是一个很自然的选择。

或者再想象一下:您被聘请来创建一个滚动叙事的可视化作品,用以展示 LGBTQ+ 社区权利在过去几十年以及全球范围内的演变历程。该页面应该包含许多有创意的可视化效果,既可以随着用户的交互式滚动而动态更新,又能通过鼠标事件来显示更多详情,还能根据屏幕大小进行自适应调整。那么 D3 无疑是构建这样一个项目的首选工具。

Mike Bostock 创建 D3 的初衷,旨在充分利用新兴的 Web 标准。正如他所言,D3“避免了专属的呈现形式,提供了非凡的灵活性,并充分展示了 CSS3、HTML5 以及 SVG 等 Web 标准的全部功能”(http://d3js.org)。本书撰稿时,D3.js 第七版是该流行工具库的最新迭代版本。通过将 D3 的各部分做模块化处理,现已完全兼容 ECMAScript 模块,可以便捷地将 JavaScript 代码打包重用,以供后续 Web 开发。

D3.js 不仅让开发人员具备创建交互效果极其丰富的应用程序的能力,而且还能像部署传统 Web 项目那样设计样式并提供服务(如图 1.2 所示作品《本&杰瑞的内幕》)。从而使这些项目具备更强的可移植性、更易于增长,同时也更方便维护,即便其他团队成员未必熟悉 D3 的特定语法。

图 1.2 D3 是一个为可视化项目提供完全技术自由与创意自由的底层库
图 1.2 D3 是一个为可视化项目提供完全技术自由与创意自由的底层库。以上和弦图摘自 Hesham Eissa 和 Lindsey Poulter 的合著项目“本&杰瑞的内幕”(https://benjerry.heshlindsdataviz.com/)

Bostock 决心广泛处理数据,并创建出这样一个工具库来:利用它绘制的地图,就如同绘制折线图、网络图或项目列表那样轻松自如。也就是说,开发人员今后再也不必为了绘制地图而去专门学习某个地图工具库的特定语法了;或者专门处理动态文本的、专门绘制网络图的……诸如此类的破事了。相反,一个交互式的可视化网络图的代码近乎纯 JavaScript,而且写法上也与 D3 展示地图动态内容的代码并无二致;它们的实现方法是相同的,甚至数据也可以是相同的:前者以某种方式按节点和链接来组织数据;后者以另一种方式按地图的地理空间来组织数据。尽管 D3 相对于其他工具库而言,学习曲线是陡峭了点,但学习 D3 绝对是稳赚不赔的买卖。

D3 不仅可以创建复杂多样的图形,还可以嵌入用户期望的高级交互功能——这对于现代 Web 开发而言至关重要。有了 D3,从旋转的地球到饼图的一小块,每个图表的每个元素都能以相同的方式实现各类交互效果;更何况 D3 是由精通数据可视化实践的专家亲手打造,因此天生就拥有数据可视化与 Web 开发规范中标准的交互式组件与行为,例如选中网络图中的节点,如图 1.3 所示。

在这里插入图片描述
图 1.3 D3 的核心在交互。该网络图中的鼠标交互效果揭示了各组织间的联系及其与所选节点关联的特定信息(详见 http://mng.bz/QROG)。

(未完待续)

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

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

相关文章

优化系统小工具

一款利用VB6编写的系统优化小工具,系统优化、桌面优化、清理垃圾、查找文件等功能。 下载:https://download.csdn.net/download/ty5858/89432367

Vue3 国际化i18n

国际化i18n方案 1. 什么是i18n2. i18n安装、配置及使用2.1 安装2.2 配置2.3 挂载到实例2.4 组件中使用2.5 语言切换 1. 什么是i18n i18n 是“国际化”的简称。在资讯领域,国际化(i18n)指让产品(出版物,软件,硬件等)无…

udp Socket组播 服务器

什么是组播 组播也可以称之为多播这也是 UDP 的特性之一。组播是主机间一对多的通讯模式,是一种允许一个或多个组播源发送同一报文到多个接收者的技术。组播源将一份报文发送到特定的组播地址,组播地址不同于单播地址,它并不属于特定某个主机…

美业门店收银系统Java源码分享私、美业系统中哪种状态订单可以操作退款?

美业门店收银系统是一种专为美容美发、美甲、SPA等美业门店设计的全面性结账解决方案,美业门店收银系统的重要性在于它为门店提供了全面的业务管理解决方案。 美业收银管理系统可以处理销售、预约管理、库存追踪和员工绩效等多项任务,不仅能够简化交易流…

【linux基础awk】如何基于强大的awk打印列、计算

打印列 awk {print $1} test.txt#-F参数去指定分隔的字符 awk -F "," {print $1,$2} file 匹配打印列 awk /a/ {print $4 "\t" $3} test.txt筛选数值 仅打印那些含有多于18个字符的行。awk length($0) > 18 test.txt 统计数目 #统计行数 less num…

2024年电商618观察:这是最好的时代 这是最坏的时代

内容提要 目前阶段增长势头更强劲的是中小商家,而星图的核心数据还是10万多个品牌。 十九世纪,英国最伟大的作家狄更斯在他的小说《双城记》开篇中写道: 这是最好的时代,这是最坏的时代; 这是智慧的年代,…

实用软件下载:ABBYY Finereader 15最新安装包及详细安装教程

数据表明FineReader PDF提供实用、简易的工具,将纸质文档和PDF结合起来,提高了数字工作场所的效率。我们都知道 即时背景识别:使不可搜索的PDF能够在工作中立即使用。值得一提的是文档转换更精准:OCR技术,它提高了PDF转换、布局保…

【linux基础】后台执行命令,防止中断nohup

前台运行与后台运行:前台运行,就是运行过程一直在屏幕输出。 目的:1. 提交至后台 & 2.防止中断 nohup 1.终端上不要有大量的log出现,后台运行 (1) & 程序后台运行 #脚本、修改权限 vi test.sh chmod 777 test.sh#后…

鸿蒙开发系统基础能力:【@ohos.inputMethod (输入法框架)】

输入法框架 说明: 本模块首批接口从API version 6开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 导入模块 import inputMethod from ohos.inputMethod;inputMethod8 常量值。 系统能力:以下各项对应的系统能力均为Sy…

Java网络编程之UDP通信与TCP通信交互代码实现

​import java.net.InetAddress; import java.io.IOException; class Main {public static void main(String[] args) {try { InetAddress localAddress InetAddress.getLocalHost(); //获得本地主机 InetAddress remoteAddress InetAddress.getByName("www.itcast.cn&qu…

【宠粉赠书】SQLServer2022:从入门到精通

为了回馈粉丝们的厚爱,今天小智给大家送上一套数据库学习的必备书籍——《SQL Server 2022从入门到精通》。下面我会详细给大家介绍这套图书,文末留有领取方式。 图书介绍 《SQL Server 2022从入门到精通》系统全面地介绍SQL Server 2022数据库应用与开…

【计算机网络仿真】b站湖科大教书匠思科Packet Tracer——实验3 总线型以太网的特性(广播,竞争总线,冲突)

一、实验目的 1.验证总线型以太网的特性; 2.验证广播特性; 3.验证各主机对总线的竞争使用以及可能产生的碰撞。 二、实验要求 1.使用Cisco Packet Tracer仿真平台; 2.观看B站湖科大教书匠仿真实验视频,完成对应实验。 三、实验内容…

LED显示屏中什么是静态驱动?什么是扫描驱动?两者的区别是什么?

随着科技的飞速发展,LED显示屏作为现代信息显示技术的重要组成部分,正以其独特的优势引领着显示行业的革新。近日,LED显示屏市场呈现出蓬勃的发展态势,技术创新不断推动行业向前发展,让LED显示屏无论是在商场的广告牌、…

<Linux> 缓冲区谁维护?

缓冲区是谁提供的&#xff1f; 来看一段代码 #include <stdio.h> #include <unistd.h> #include <stdlib.h> #include <string.h> int main() {const char *str1 "a";printf("%s", str1);const char *str2 "b";writ…

Younger 数据集:人工智能生成神经网络

设计和优化神经网络架构通常需要广泛的专业知识&#xff0c;从手工设计开始&#xff0c;然后进行手动或自动化的精细化改进。这种依赖性成为快速创新的重要障碍。认识到从头开始自动生成神经网络架构的复杂性&#xff0c;本文引入了Younger&#xff0c;这是一个开创性的数据集&…

使用Birdeye访问Sui上加密市场数据

是一个链上加密交易数据聚合器&#xff0c;于2024年4月开始整合Sui数据。 个人DeFi用户可以在Birdeye的首页找到丰富的数据&#xff0c;包括关于主流区块链上的tokens、交易和交易者钱包的详细信息。 Birdeye提供API和WebSockets数据服务&#xff0c;涵盖token价格和其他DeFi…

类和对象(封装、继承、多态、友元)

c面相对象的三大特性为&#xff1a;封装、集成、多态 c 认为万事万物都皆为对象&#xff0c;对象上有其属性和行为 一、类和对象&#xff08;封装&#xff09; &#xff08;一&#xff09;封装的意义 封装是c面相对象的三大特性之一 封装的意义&#xff1a; 将属性和行为…

HarmonyOS NEXT:华为开启全新操作系统时代

在全球科技浪潮的汹涌澎湃中&#xff0c;华为再次以创新者的姿态&#xff0c;引领了一场关于操作系统的革命。HarmonyOS NEXT&#xff0c;这一由华为倾力打造的分布式操作系统&#xff0c;不仅是对现有技术的一次大胆突破&#xff0c;更是对未来智能生活的一次深邃展望。 Harmo…

AU音频重新混合音频,在 Adobe Audition 中无缝延长背景音乐,无缝缩短BGM

导入音频&#xff0c;选中音频&#xff0c;并且点 New Multitrack Session 的图标 设计文件名和存储路径&#xff0c;然后点 OK 点 Essential Sound 面板点 Music &#xff08;如果没有这个面板 点菜单栏 Windows > Essential Sound 调出来&#xff09; 点 Duration 展…

实战案例:如何用ChatGPT生成适合不同领域的高质量文章

随着人工智能技术的飞速发展&#xff0c;生成高质量文章已经不再是难题。特别是OpenAI开发的ChatGPT&#xff0c;更是为写作工作带来了极大的便利。那么&#xff0c;如何用ChatGPT生成适合不同领域的高质量文章呢&#xff1f;本文将通过实战案例&#xff0c;为大家详细讲解这一…