通过这门免费的 D3.js 课程学习数据可视化

点击图片即可进入课程。

D3.js 是一个 JavaScript 库，它允许你使用 HTML、SVG 和 CSS 将数据可视化。学习它将赋予你强大的数据挖掘能力，因为你基本上可以创建任何你能想到的可视化效果。

然而，这个库并不容易学习，所以入门可能会有点棘手。因此，我们与网页开发者兼讲师Sohaib Nehal合作，创建了一门关于该库的免费完整课程。在课程中，Sohaib 将为你循序渐进地介绍这个强大的库。

我们来看看它的布局！

内容

本课程包含 10 个屏幕录像，总时长不到一小时。课程从最基本的概念讲起，例如选择、操作、数据加载等等。这为你在课程后续学习创建的各种可视化图表奠定了基础。

第一部分：课程介绍

与 Scrimba 的课程一样，本课程首先快速浏览课程内容，并介绍 D3.js 和讲师。

#2：选择与操作

首先你需要学习如何使用 D3.js 选择和操作 DOM 元素。这个库在操作 DOM 方面功能非常强大，理论上你可以用它来替代 jQuery。

#3：数据加载和绑定

因为你要创建可视化图表，所以学习如何加载数据以及如何将其绑定到 DOM 非常重要。因此，在本讲中，你将学习这些内容。

#4：创建简单的条形图

在第三讲中，你将学习如何构建你的第一个可视化图表：一个简单的柱状图。我们之所以这么早就让你动手实践，是因为创建可视化图表比单纯地讲解理论有趣得多。所以我们相信你会喜欢这节课。

#5：创建标签

下一步是给柱状图添加标签，这在实际应用中也经常需要。这是一个简短易懂的教程。在这里，我建议你尝试调整标签的位置，这是一种简单有趣的与代码交互的方式。

#6：音阶

在D3中，比例尺是一个至关重要的概念。它允许你将数据映射到其他相关范围，例如可用空间的大小。因此，在本讲中，你将学习以下scaleLinear()方法：

var yScale = d3.scaleLinear()  
    .domain(\[0, d3.max(dataset)\])  
    .range(\[0, svgHeight\]);

#7：斧头

坐标轴是任何图表不可或缺的一部分，D3 提供了一些创建坐标轴的简单方法。本课以上一课为基础，利用刻度创建坐标轴。它还能帮助你理解课程最后一个视频教程中将要学习的超酷折线图。

#8：创建 SVG 元素

即使你之前已经在课程中创建过 SVG 元素，但它是一个非常重要的概念，值得单独讲解。在本讲中，你将学习 `<div>` <rect>、 `<span> <circle> ` 和 ` <div> <line>` 元素。

#9：创建饼图

饼图在很多情况下都非常实用，所以在本讲中，你将学习如何创建饼图。D3 提供了一个简单的 API 来实现这一点，所以你现在应该不会感到困难。

第十题：创建折线图

最后，你将学习如何创建折线图来可视化比特币价格。为了获取数据，你需要使用外部 API。这个项目还将整合你在整个课程中学到的许多概念，因此它是一个很好的总结性可视化项目。

就这样！学完这十节课后，你应该就能很好地掌握 D3.js 的使用方法，无论是在工作中还是在个人项目中。

如果你看到了这里，我们非常希望你能在Twitter上给Sohaib点个赞！

斯克林巴舞曲

在你离开之前，我们再快速了解一下这门课程背后的技术。它使用Scrimba构建，Scrimba 是一款交互式代码录制工具。“scrim”看起来像普通的视频，但它是完全交互式的。这意味着你可以编辑屏幕录制中的代码。

这里有一个GIF动画来解释这个概念：

暂停屏幕录制 → 编辑代码 → 运行！ → 查看更改

当你需要对代码进行实验才能正确理解它，或者只是想复制一段代码时，这非常有用。

还在等什么？赶快前往Scrimba，今天就来参加免费课程吧！

感谢阅读！我叫佩尔，是Scrimba的联合创始人，我热爱帮助人们学习新技能。如果您想收到新文章和资源的通知，请在Twitter上关注我。