From the course: D3.js Essential Training

Pulling the D3 library into your HTML page - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Pulling the D3 library into your HTML page

“

- [Instructor] So far, we've added our SVG shapes manually. We haven't used any D3 yet. When you write a line of code using D3, the browser references the library to make sense of your command and then executes the JavaScript commands it finds, so D3.js is just a library of code written in JavaScript. And now, we're going to look at how to pull that D3 library into our HTML page, so how do we get access to all these new commands? The simplest way is just to use script tags to pull in this D3 library. This is the whole thing, by the way. So D3 is actually modular as we'll see in a minute, and this is the whole thing. Let's take a look, it's very small font, but up at the top here, it says d3js.org, version 7.9, copyright 2010 to '23, Mike Bostock, and then begins the JavaScript or the entire function. And you can see, it's absolutely vast. You'll also see another URL that's very similar, d3js.org/d3.v7.min.js, and it's exactly the same code, but this has been minified by removing all the white space, so it's smaller basically. And notice also it says, version 7 on the URL. It doesn't say version 7.9, but if you come up here and type in version 7, it will always give you the latest version, which in this case is 9. So as I say, the simplest way to pull this in is to add some script tags. And we will say, the source is this and save that. I tend to pull the library in at the end of the head tags so that I know any commands I've written in the body will have access to the library. You often see in other people's code that the library has been pulled in at the bottom of the body tags, but you must import D3 before you can use the D3 commands, of course, so you can trip yourselves up if you pull in the D3 library halfway through your body tags, for example. Now, we're going to add a bit of JavaScript within body just to test that we have pulled it in, say console.log d3.version. So let's pop back to our webpage and refresh, then I'm saying F12 and going to the console. And you can see it says version 7.9.0, so that's loaded correctly. Now, let's explore some options because pulling in the code like this is not necessarily the best way for you, and there are lots of different options. The first that you could do is you could download the D3 file offline and reference it locally. The benefit of that is that you can play with D3 offline that way, but it does come with some concerns. You might get outdated D3 fairly quickly and you might trigger a CORS error, Cross-Origin Resource Sharing error. The second option is to run a server locally, so instead of simply accessing the local file here as I am doing, your URL here would say something like localhost:8080, and you would be using a node server or a similar local, perhaps JavaScript-based server to serve these files to your browser. And the benefit of that is it doesn't trigger the cause error and it mimics a real server. Now, what if you're trying to use D3 within Angular or React, or you want to use D3 to process your data on Node? So you can use something, a package manager, such as npm or Yarn to install your package. You will, of course, need to take further steps then to import or bundle your installed library before you can use it in your HTML. And that depends which framework you're using as to how you would do that. You can embed D3 in web components using Lit, or you can use D3 in Jupiter Notebooks to extend Python as well. A final way of referencing, which is the one that we are going to take for this course actually, is to use a content delivery network or CDN, and there are quite a few of these. And all that does is host the D3 for you in the most accessible way possible on servers that are close by to you, so this is actually a better bet than going for the original master code because the availability here will be better. So we'll take the minified version, and we're going to paste it in there, and save that. And when we come back here and refresh, you can see that still worked, okay, it's still telling us which version we're on. Now, one important thing to know in terms of referencing the D3 library is that D3 has been modular since version 4, which means in a production environment, when you care about loading speeds, you can pull in just the code you need, so let's take a look at some of the many modules that you get. These ones are pinned, so we have d3-shape, scale, hierarchy, a big one is d3-selection. This is crucial, I'm not sure how you could really use D3 without using that one. And you can scale through all of the repositories at that location. So for learning purposes, it's fine to use the entire library, but once you are in a production environment, you should just select the libraries that you need. And your content delivery networks will support just these individual libraries. npm and Yarn support these things as well, so there's another page that will say npm/id3:selection, et cetera. So anything you can do with the whole library in terms of installing it, you will be able to adopt the same process for the modules. So you can see now, hopefully, D3 library is a body of JavaScript that you must pull into your project either as a URL, file, or installation in order to use the D3 commands in the browser. Next up, we briefly look at the DOM and console, indispensable tools for the D3 developer before we start building visuals.

Contents