Search⌘ K
AI Features
Home
Courses
D3 Tips and Tricks: Interactive Data Visualization

HTML

Learn to identify the role of HTML in creating simple D3 visualizations, including how to integrate CSS and JavaScript, and the importance of loading the D3.js library efficiently.

We'll cover the following...

Let’s take a look at the HTML sections of the simple graph code to understand its use.

The HTML portion of the code

Here’s the HTML portion of the code:

HTML
<!DOCTYPE html>
<meta charset="utf-8"> 
<style>
  The CSS is in here
</style>
<body>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script>
  The D3 JavaScript code is here
</script> 
</body>

Understanding the HTML portion

It kind of looks like a wrapping for the CSS (lines 3-5) and JavaScript (lines 10-12). We can see that it really doesn’t boil down to much at all. That doesn’t mean it’s not important though.

There are plenty of good options for adding additional HTML stuff into this very basic part of the file. But for what we’re going to be doing, we really don’t need to bother too much.

One thing probably worth mentioning is line 8:

<script src="https://d3js.org/d3.v6.min.js"></script>

That’s the line that identifies the file that needs to be loaded to get D3 up and running. In this case, the file is sourced from the official D3.js repository on the Internet (that way we are using the most up-to-date version).

The D3 file is actually called d3.v6.min.js, which may come as a bit of a surprise. That tells us that this is version 6 of the D3.js file (the v6 part), which is an indication that it is separate from the v5 release, which was superseded in 2020.

The other point to note is that this version of D3.js is the minified version (hence “min”). This means that any extraneous information has been removed from the file to make it quicker to load.

Later, we will be doing more in this area. But for now, the basics are done.

The two parts that I left out are the CSS and the D3 JavaScript.