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

第一部分 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 图 1.3 D3 的核心在交互。在上述可视化网络图中,鼠标交互效果揭示了各组织间的联系及其与所选节点关联的特定信息(详见 https://amdufour.github.io/organizations-against-polarization)。

(未完待续)

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

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

相关文章

探秘神经网络激活函数:Sigmoid、Tanh和ReLU,解析非线性激活函数的神奇之处

引言 在神经网络中,激活函数扮演着至关重要的角色。它们赋予神经网络非线性的能力,使得网络具备学习和表示复杂函数关系的能力。本文将详细解析三种常见的激活函数:Sigmoid、Tanh和ReLU,揭开它们在神经网络中的奥秘。无论你是初学…

【十一】【QT开发应用】模拟腾讯会议登录界面设计UI

ui 加入会议的样式表 QPushButton { /* 前景色 */ color:#0054E6; /* 背景色 */ background-color:rgb(255,255,255); /* 边框风格 */ border-style:outset; /* 边框宽度 */ border-width:0.5px; /* 边框颜色 */ border-color:gray; /* 边框倒角 */ border-radius…

日常-----最爱的人

今日话题 大家好嗷,今天聊的技术可比之前的重要的多啊,哼哼,也不是今天,大家像我看齐嗷,我宣布个事情!!! 于2024年6月21日晚上,本人遇到了这一生最爱的人 嘿嘿 这种事…

微信小程序 引入MiniProgram Design失败

这tm MiniProgramDesign 是我用过最垃圾的框架没有之一 我按照官网的指示安装居然能安装不成功,牛! 这里说明我是用js开发的 到以上步骤没有报错什么都没有,然后在引入组件的时候报错 Component is not found in path “./miniprogram _npm/vant/weapp/button/index” (using…

CSS阴影优化气泡框样式

<body> <div class"pop">气泡框</div> </body>body{display: flex;justify-content: center;align-items: center;height: 100% } .pop{display: flex;justify-content: center;align-items: center;background: #409eff;width: 150px;heigh…

03-Shell编程之循环语句与函数

目录 3.1 for循环语句 3.1.1for语句的结构 3.1.2 for语句应用实例 3.2 使用whlie循环语句 1.打印数字1到5 3.3 使用until循环语句 3.3.1until的实例 1.打印数字1到5&#xff08;使用until的逆向逻辑&#xff09; 2.等待用户输入特定内容 3.4 函数 3.4.1Shell函数的基…

自学C语言-10

第10章 指针 指针是C语言的一个重要组成部分&#xff0c;是C语言的核心、精髓所在。用好指针&#xff0c;可以在C语言开发中起到事半功倍的效果。一方面&#xff0c;可以提高程序的编译效率、执行速度&#xff0c;以及动态存储分配&#xff1b;另一方面&#xff0c;可使程序更加…

playwright录制脚本原理

Paywright录制工具UI 在上一篇博客中介绍了如何从0构建一款具备录制UI测试的小工具。此篇博客将从源码层面上梳理playwright录制原理。当打开playwright vscode插件时&#xff0c;点击录制按钮&#xff0c;会开启一个新浏览器&#xff0c;如下图所示&#xff0c;在新开浏览器页…

Hive基础知识(十八):Hive 函数的使用

1. 系统内置函数 1&#xff09;查看系统自带的函数 hive (hive3)> show functions; Time taken: 0.085 seconds, Fetched: 289 row(s) 2&#xff09;显示自带的函数的用法 hive (hive3)> desc function upper; OK tab_name upper(str)- Returns str with all characters…

“了解MySQL中的enum枚举数据类型“

目录 # 开篇 1. 创建包含枚举类型的表 2. 插入枚举类型的数据 3. 查询包含枚举类型的表 4. 更新枚举类型的数据 5. 使用枚举类型的好处 注意事项 示例总结 附加 # 开篇 在数据库中&#xff0c;枚举&#xff08;ENUM&#xff09;是一种数据类型&#xff0c;用于存储一组…

即插即用篇 | 手把手教你 YOLOv10 添加注意力机制 | 20+ 种全打通!

YOLOv10 添加注意力机制 ! 视频教程地址-哔哩哔哩 文章目录 YOLOv10 添加注意力机制 !注意力机制介绍注意力机制的分类1. SE 注意力模块1.1 原理1.2 代码2. CBAM 注意力模块2.1 原理2.2 代码3. ECA 注意力模块3.1 原理3.2 代码4. CA 注意力模块4.1 原理4.2 代码5. 添加方式�…

构建开源多模态RAG系统

在这个新的冒险中&#xff0c;我们将深入研究使用开源大型语言多模态&#xff08;LLMM&#xff09;构建检索增强型生成&#xff08;RAG&#xff09;系统的过程。值得注意的是&#xff0c;我们的重点是在不依赖LangChain或Llama索引的情况下实现这一点&#xff1b;相反&#xff…

LabVIEW在机器人研究所中的应用

机器人研究所致力于机器人技术的研究与开发&#xff0c;涵盖工业机器人、服务机器人、医疗机器人等多个领域。研究所需要一个高效、灵活的实验控制和数据采集系统&#xff0c;以进行复杂的机器人实验&#xff0c;并对实验数据进行实时处理和分析。 项目需求 实时控制与监控&am…

NC--介绍-未加密加密后-流量抓包对比

免责声明:本节仅做技术交流与学习... 目录 介绍: 用法: 未加密--流量抓包 加密: 攻击端 靶机 抓包分析: 介绍: nc 是一个Linux环境下常用的工具命令&#xff0c;可以用来帮助开发者查询和解决网路问题&#xff0c;通常被认为是 NetCat 工具的缩写&#xff0c;在网络工具…

Hi3861 OpenHarmony嵌入式应用入门--轮询按键

本篇介绍使用轮询方式读取gpio状态来判断按键状态。 原理图如下 GPIO API API名称 说明 hi_u32 hi_gpio_init(hi_void); GPIO模块初始化 hi_u32 hi_io_set_pull(hi_io_name id, hi_io_pull val); 设置某个IO上下拉功能。 hi_u32 hi_gpio_set_dir(hi_gpio_idx id, hi_gpi…

MySQL理解-下载-安装

MySQL理解: mysql:是一种关系型数据库管理系统。 下载&#xff1a; 进入官网MySQLhttps://www.mysql.com/ 找到download 滑动到最下方&#xff1a;有一个开源社区版的链接地址&#xff1a; 然后就下载完成了 安装&#xff1a; 双击&#xff1a; 一直next 一直next这一步&…

仓颉编程语言入门

华为在 2024 年 6 月 21 日的华为开发者大会上&#xff0c;华为终端 BG 软件部总裁龚体正式官宣了华为自研仓颉编程语言&#xff0c;并发布了 HarmonyOS NEXT 仓颉语言开发者预览版。 仓颉编程语言文件后缀名为 .cj, 以下是第一个入门代码输出&#xff1a;你好&#xff0c;仓颉…

ESP32-S3方案应用设备无线交互技术,产品远程控制与语音交互

在物联网和人工智能(AI)技术融合的浪潮中&#xff0c;ESP32-S3芯片以其卓越的性能和多功能性&#xff0c;成为智能家居和工业自动化领域的明星产品。 ESP32-S3是一款基于Xtensa LX6处理器的嵌入式系统级芯片&#xff0c;具有高效、低功耗的特点。集成的Wi-Fi和蓝牙功能&#x…

三大交易所全面恢复 IPO 申请

6月21日晚间&#xff0c;北交所受理了3家企业的IPO申请&#xff0c;这是北交所时隔3个月之后恢复IPO受理。6月20日晚间&#xff0c;沪深交易所各受理了1家IPO申请&#xff0c;这是沪深交易所时隔半年后再次受理IPO。这也意味着&#xff0c;三大交易所IPO受理全部恢复。 6月21日…

致敬企业家精神:比亚迪仰望发布“旷野宣言”

近年来&#xff0c;随着汽车在中国的普及&#xff0c;钟爱越野和探险的车主群体也在飞速发展壮大。 那么问题就来了&#xff1a;为什么会有这么多的人们钟爱越野和探险&#xff1f;越野精神究竟是什么&#xff1f; 作为备受关注的硬派越野车&#xff0c;比亚迪旗下的高端品牌仰…