Search⌘ K
Home
Courses
Master D3.js for Data Visualization

Adding D3

Explore the steps to integrate D3.js into a web project by loading it via a CDN and setting UTF-8 character encoding. Understand the benefits of using the standard versus minified versions for development and production. Learn about D3's modular design and how it impacts loading and usage. This lesson prepares you to start coding with D3 effectively.

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:

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