AI Features
Home
Courses
Master D3.js for Data Visualization

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:

<!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.

...