Learn D3 入门文档: Data

2024-06-01 03:18
文章标签 文档 入门 data learn d3

本文主要是介绍Learn D3 入门文档: Data,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

引子

继 Learn D3: By Example 第三篇,只是英文翻译,可修改代码的部分用静态图片替代了,想要实时交互请阅读原文。

  • 原文:Learn D3: Data

  • 版本:Published Mar 24, 2020

  • Origin

  • My GitHub

正文

在 Observable 上有多种方法可以获取数据。但由于我们刚刚开始,让我们使用最简单的:文件附件。

这个笔记本有一个包含每日温度读数的 CSV 文件。我使用 Shift-Command-U ⇧⌘U 键盘快捷键添加它;你还可以通过将文件拖放到文件附件窗格来附加文件,文件附件窗格可通过笔记本菜单或单击上面的回形针图标访问。

88-1

FileAttachment 函数仅返回一个句柄,该句柄允许你选择所需的表示形式,例如 blob 、 buffer 或(UTF-8编码的)文本。对于 CSV 文件,我们可以调用 file.text 按照想要的字符串形式获取文件内容。

88-2

当然,更有用的方法是将文本解析为具有 datetemperature 属性的对象,我们可以通过将文本传递给 d3.csvParse 来实现。(D3 在下面的附录中加载,在笔记本中的每个单元都可用。)

单击下面的数组查看对象。

88-3

虽然 Observable 隐性地等待跨单元的 promises ,但我们必须等待 file.text promise ,因为我们希望访问同一单元中的返回值。

默认情况下,D3 不进行类型推断,因此 datetemperature 属性都是字符串。这使得它们很难相处。例如,如果你尝试相加两个温度,将连接它们。哎呀!😝

88-4

要将这些字符串转换为日期和数字,传递一个函数作为第二个参数给 d3.csvParse 。每行调用此函数,根据需要操作行的对象。更好的做法是,通过 d3.autoType 自动推断类型。

88-5

如果你查看上面的数组,你将看到蓝色的日期和数字(而不是双引号之间的蓝色字符串),这就表明类型转换成功。

让我们稍微了解一下 Observable 单元的语法。到目前为止,你只看到了可以命名或匿名的表达式单元。可以检查这两种类型的单元,但只能从其它单元引用已命名的单元。

88-6
88-7
88-8

对于比简单表达式更复杂的代码,编写一个块,该块由一个或多个用大括号括起来的语句组成。块单元与函数类似,仅当它们 return 或 yield 时才产生值。和表达式单元一样,命名块单元可以从其它单元引用。

88-9

局部变量,例如上面的 s ,对笔记本的其余部分不可见;其它单元只能访问命名单元的返回值。通过这种方式,Observable 类似于电子表格:每个单元定义一个独特值。

88-10

回到手头的任务,在名为 data 的单元中,有更明确的方法来获取、解析和类型转换 CSV 文件。如果你的数据与 d3.autoType 不兼容,你可以采用这种方法(如果你不确定,不要依赖自动类型推断或查阅文档。)

88-11

有了方便表示的数据,我们现在可以开始干活了!例如,我们可以计算日期和温度的范围,得到区域值。

88-12
88-13

正如我们前面看到的,我们可以在示例直方图中注入数据,便于直观感知温度分布。

88-14
88-15
88-16

温和的气候!啊,旧金山。🌤

在 Observable 处理数据时,一个隐性的考虑是将代码放在单个单元还是分开的单元中。一个好的经验法则是,一个单元应该定义一个被其它单元引用的命名值(如上面的 data ),或者它应该向读者显示一些有用信息(如本文、上面的图表或检查单元数据)。

这条规则的一个关键含义是,你应该避免单元之间的隐式依赖关系:只依赖于你可以命名的内容。

为什么?笔记本的数据流是根据其单元引用构建的。如果单元没有名称,则无法引用该单元,并且隐式依赖其效果的单元可能会在其前面运行。(单元按拓扑顺序运行,而不是从上到下。)隐式依赖在开发过程中会导致不确定性的行为😱 ,以及当笔记本重新加载时可能出现错误💥 !

例如,如果一个单元定义了一个数组,而另一个单元对其进行了修改,那么其它单元可能会在突变之前或之后看到该数组。为了避免这种不确定性,需要让依赖关系变的显性,可以为第二个单元指定一个名称并使用 array.from 或 array.map 复制数组。或者合并两个单元,这样其它单元只能看到已修改的数组。

我们的数据已经准备好了,让我们转向图形!

Next

附录

88-17
88-18
88-19

参考资料

  • Learn D3: Data

这篇关于Learn D3 入门文档: Data的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1019838

相关文章

C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式

《C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式》Markdown凭借简洁的语法、优良的可读性,以及对版本控制系统的高度兼容性,逐渐成为最受欢迎的文档格式... 目录为什么要将文档转换为 Markdown 格式使用工具将 Word 文档转换为 Markdown(.

详解如何使用Python构建从数据到文档的自动化工作流

《详解如何使用Python构建从数据到文档的自动化工作流》这篇文章将通过真实工作场景拆解,为大家展示如何用Python构建自动化工作流,让工具代替人力完成这些数字苦力活,感兴趣的小伙伴可以跟随小编一起... 目录一、Excel处理:从数据搬运工到智能分析师二、PDF处理:文档工厂的智能生产线三、邮件自动化:

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

Python中OpenCV与Matplotlib的图像操作入门指南

《Python中OpenCV与Matplotlib的图像操作入门指南》:本文主要介绍Python中OpenCV与Matplotlib的图像操作指南,本文通过实例代码给大家介绍的非常详细,对大家的学... 目录一、环境准备二、图像的基本操作1. 图像读取、显示与保存 使用OpenCV操作2. 像素级操作3.

Maven项目中集成数据库文档生成工具的操作步骤

《Maven项目中集成数据库文档生成工具的操作步骤》在Maven项目中,可以通过集成数据库文档生成工具来自动生成数据库文档,本文为大家整理了使用screw-maven-plugin(推荐)的完... 目录1. 添加插件配置到 pom.XML2. 配置数据库信息3. 执行生成命令4. 高级配置选项5. 注意事

Python使用python-docx实现自动化处理Word文档

《Python使用python-docx实现自动化处理Word文档》这篇文章主要为大家展示了Python如何通过代码实现段落样式复制,HTML表格转Word表格以及动态生成可定制化模板的功能,感兴趣的... 目录一、引言二、核心功能模块解析1. 段落样式与图片复制2. html表格转Word表格3. 模板生

浅谈Redis Key 命名规范文档

《浅谈RedisKey命名规范文档》本文介绍了Redis键名命名规范,包括命名格式、具体规范、数据类型扩展命名、时间敏感型键名、规范总结以及实际应用示例,感兴趣的可以了解一下... 目录1. 命名格式格式模板:示例:2. 具体规范2.1 小写命名2.2 使用冒号分隔层级2.3 标识符命名3. 数据类型扩展命

POI从入门到实战轻松完成EasyExcel使用及Excel导入导出功能

《POI从入门到实战轻松完成EasyExcel使用及Excel导入导出功能》ApachePOI是一个流行的Java库,用于处理MicrosoftOffice格式文件,提供丰富API来创建、读取和修改O... 目录前言:Apache POIEasyPoiEasyExcel一、EasyExcel1.1、核心特性

Python中模块graphviz使用入门

《Python中模块graphviz使用入门》graphviz是一个用于创建和操作图形的Python库,本文主要介绍了Python中模块graphviz使用入门,具有一定的参考价值,感兴趣的可以了解一... 目录1.安装2. 基本用法2.1 输出图像格式2.2 图像style设置2.3 属性2.4 子图和聚

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取