数据可视化课程_在这个由10部分组成的免费数据可视化课程中学习D3

数据可视化课程

D3.js is a JavaScript library which allows you to bring data to life using HTML, SVG, and CSS. Learning it will give you superpowers when it comes to extracting value from data, as you’ll basically be able to create any visualization you can think of.

D3.js是一个JavaScript库，可让您使用HTML，SVG和CSS使数据栩栩如生。 学习它会为您从数据中提取价值提供超能力，因为您基本上可以创建您可以想到的任何可视化。

However, it’s not the easiest library to learn, so getting started can be a bit tricky. That’s why we’ve teamed up with web developer and instructor Sohaib Nehal and created a free full-length course on it. Throughout the course, Sohaib will give you a soft introduction to the powerful library.

但是，它不是最容易学习的库，因此入门可能会有些棘手。 因此，我们与网络开发人员和讲师Sohaib Nehal合作，并在其上创建了免费的全长课程。 在整个课程中，Sohaib将向您简要介绍功能强大的库。

Let’s have a look at how it’s laid out!

让我们看一下它的布局！

内容 (The content)

The course consists of 10 screencasts which in total last less than an hour. It starts off with the most basic concepts, like selection, manipulation, data loading, and more. This lays the groundwork for the various visualizations you’ll learn to create throughout the rest of the course.

该课程包括10个截屏视频，总共持续不到一个小时。 它从最基本的概念开始，例如选择，操作，数据加载等。 这为您在本课程的其余部分中将学习创建的各种可视化奠定了基础。

1：课程介绍 (1: Course introduction)

As usual with Scrimba courses, it begins with a quick walk-through of the course content, along with an intro to D3.js and the instructor.

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

2：选择和操纵 (2: Selection and Manipulation)

The first thing you need to learn is how to select and manipulate DOM elements with D3.js. The library is actually pretty powerful in terms of manipulating the DOM, so you could theoretically use it as a replacement for jQuery.

您需要学习的第一件事是如何使用D3.js选择和操作DOM元素。 该库实际上在处理DOM方面非常强大，因此从理论上讲，您可以将其用作jQuery的替代品。

3：数据加载和绑定 (3: Data Loading and Binding)

As you’re going to create visualizations, it’s important to learn how to load data in and also how to bind it to the DOM. So in this lecture, you’ll learn that.

在创建可视化时，了解如何加载数据以及如何将其绑定到DOM至关重要。 因此，在本讲座中，您将学到这一点。

4：创建简单的条形图 (4: Creating a simple bar chart)

In the third lecture, you’ll learn how to build your very first visualization: a simple bar chart. The reason we’re introducing you to building stuff so early on is that it’s much more fun to create visualizations than simply talking about theory. So we think you’ll enjoy this lesson.

在第三堂课中，您将学习如何建立您的第一个可视化文件：一个简单的条形图。 我们之所以这么早就向您介绍构建内容的原因是，创建可视化效果比单纯谈论理论要有趣得多。 因此，我们认为您会喜欢这一堂课。

5：创建标签 (5: Creating labels)

The next step is to add labels to the bar chart, as you often would want to do this in real life. This is a short and simple lecture. Here, I’d recommend you to play around with the positions of the labels, as that’s a simple and fun way of interacting with the code.

下一步是在条形图中添加标签，因为您通常会希望在现实生活中这样做。 这是一个简短的演讲。 在这里，我建议您使用标签的位置，因为这是与代码进行交互的一种简单而有趣的方式。

6：秤 (6: Scales)

Scales are a critical concept in D3. They allow you to map your data to other relevant ranges, for example, the amount of space you have available. So in this lecture, you’ll learn about the scaleLinear() method:

秤是D3中的关键概念。 它们使您可以将数据映射到其他相关范围，例如，可用空间量。 因此，在本讲座中，您将学习scaleLinear()方法：

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

7：轴 (7: Axes)

Axes are an integral part of any chart, and D3 provides you with a few simple methods for creating them. This lesson builds upon the last one, as it takes advantage of scales when creating the axes. It also sets you up for understanding the super-cool line chart you’ll learn in the final screencast of the course.

轴是任何图表的组成部分，D3为您提供了一些简单的方法来创建它们。 本课程以最后一个课程为基础，因为它在创建轴时利用了比例尺。 它还使您可以理解在本课程的最后一个截屏视频中将学习的超酷折线图。

8：创建SVG元素 (8: Creating SVG elements)

Even though you’ve already created SVG elements previously in the course, it’s such an important concept that it deserves its own lecture. In it, you’ll learn about the <rect>, <circle> , and <line> elements.

即使您先前已经在本课程中创建了SVG元素，它也是一个非常重要的概念，值得您自己讲课。 在其中，您将了解<rect> ， <circle>和<line>元素。

9：创建饼图 (9: Creating a pie chart)

Pie charts are handy in many cases, so in this lecture, you’ll learn how to create one. D3 provides a simple API for doing this, so it shouldn’t be difficult for you at this point.

饼图在很多情况下都很方便，因此在本讲座中，您将学习如何创建饼图。 D3提供了一个简单的API来执行此操作，因此对于您来说这并不困难。

10：创建折线图 (10: Creating a line chart)

Finally, you’ll learn how to create a line chart to visualize the Bitcoin price. To get the data, you’ll use an external API. This project will also tie together a lot of the concepts you’ve learned throughout the course, so it’s a great visualization to end with.

最后，您将学习如何创建折线图以可视化比特币价格。 要获取数据，您将使用外部API。 该项目还将把您在整个课程中学到的许多概念联系在一起，因此，它是一个很好的可视化对象。

And that’s it! After going through these ten lessons, you should be well set up for starting to use D3.js in your job or for personal projects.

就是这样！ 学习完这十个课程之后，您应该已经做好准备，可以开始在工作或个人项目中使用D3.js。

If you reach this point, we’d really appreciate if you’d give Sohaib a shout-out on Twitter!

如果您达到了这一点，我们非常感谢您在Twitter上对Sohaib表示欢迎！

Scrimba格式 (The Scrimba format)

Before you leave, let’s also have a quick look at the technology behind the course. It’s built using Scrimba, an interactive coding screencast tool. A “scrim” looks like normal video, however, it’s fully interactive. This means that you can edit the code inside the screencast.

在您离开之前，让我们快速浏览一下本课程的技术背后。 它是使用Scrimba (交互式编码截屏工具)构建的。 “稀松布”看起来像普通的视频，但是，它是完全交互式的。 这意味着您可以在截屏视频中编辑代码。

Here’s a gif which explains the concept:

这是解释概念的gif：

Pause the screencast → Edit the code → Run it! → See your changes

暂停截屏→编辑代码→运行它！ →查看您的更改

This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.

当您觉得需要试验代码以正确理解它时，或者只想复制一段代码时，这非常有用。

So what are you waiting for? Head over to Scrimba and take the free course today!

那你还在等什么？ 前往斯克林巴，立即参加免费课程！

---

---

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

谢谢阅读！ 我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。 如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营 。

翻译自: https://www.freecodecamp.org/news/learn-to-visualize-data-with-this-free-d3-js-course-2433b060f9dc/

数据可视化课程