Master D3.js for Data Visualization/

...

/

Adding D3

Adding D3

In this lesson, you will learn how to add D3 to your project. It is as simple as dropping a single script into a file.

We'll cover the following...

Let’s take the first step to add D3 to our project. In an index.html file, we will have the following:

Press + to interact
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>D3 Basics</title>
  </head>
  <body>
    <script src="https://d3js.org/d3.v6.js"></script>
  </body>
</html>

There are two things worth noting in the code snippet above. We are setting the character encoding and loading D3.

Character encoding

At the top of the <head> section, the character set is being set to UTF-8. It is best to add this line if you are going to use D3. We will be dealing with a lot of data. Data can contain a wide variety of characters. To prevent errors from appearing, we should always set the character set to UTF-8. It makes working with D3 easier.

D3 CDN

There are a couple of ways to download and include D3 into your project. We will use the CDN they provide.

What is a CDN?

CDN stands for content delivery network. They are a vast network of servers that host static files like CSS, JavaScript, and images.

One of the main issues of delivering files to the user is how long it takes for the file to ...