Start by creating a new folder for your project. Within that folder, I recommend creating a sub-folder called d3. Then download the latest version of d3.v7.js into that sub-folder. As of this writing, the current version of D3 is 7.3.0
D3 is also provided in a “minified” version, d3.v7.min.js, from which whitespace has been removed for smaller file sizes and faster load times. The functionality is the same, but typically you’d use the regular version while working on a project (for friendlier debugging), and then switch to the minified version once you’ve launched the project publicly (for optimized load times).
Alternatively, D3 is also available as a collection of modules. This means that it has been split into a collection of smaller pieces that work independently (for example scales or zooming). Using one or a few of these modules means you only load in what you need, which speeds up load time.
The choice is up to you, but in these tutorials we’ll be using the standard version.
A fourth option is to download the entire D3 repository, which gives you not just the JavaScript files, but also all of the component source code. You can browse the repository contents first, or just download the whole thing as a compressed ZIP file.
Create a simple HTML page within your project folder named index.html. Your folder structure should now look something like this:
project-folder/d3/d3.v7.jsd3.v7.min.js (optional)index.html
Now paste the following into your HTML file, so it references D3 in the head and provides room for your JavaScript code:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>D3 Test</title><script type="text/javascript" src="d3/d3.v7.js"></script></head><body><script type="text/javascript">// Your beautiful D3 code will go here</script></body></html>
I described D3 as a tool built on JavaScript. To be precise, D3 is a JavaScript library. What does that mean? To use an analogy, think of the JavaScript programming language as a basic set of LEGO bricks. You can use the bricks in different combinations to make all kinds of things. A library, then, is like a LEGO set. We're still working in LEGO (JavaScript), but adding in a set (eg. D3) makes creating a castle or a pirate boat or whatever (in the case of D3, data visualizations!) much quicker and easier. A code library is simply some code someone else has written that you can reuse to make a particular task easier. There are a universe of JavaScript libraries out there for a universe of different activites. You may have heard of Lodash.js which provides useful utility functions, or Three.js which is used for 3D high performance graphics. D3 is one of these and can be used in combination with other JavaScript libraries.
You'll notice that the D3 file you included in your project folder has the filename extension .js, which means JavaScript. So it's not so mysterious; D3 is some JavaScript code that extends the normal functioning of the language, to make it easier to visualize data.
In some cases, you can just open your HTML file in a web browser to view it. However, when loading external data sources, it is more reliable to run a local web server and view your page from http://localhost:8888/. You could use a server like MAMP, run a simple server using Python, or see the notes on the wiki on activating a quick, temporary server.
In these tutorials, since we will stick to hard-coded data rather than loading in external sources, you can get away with not setting up a web server. But you'll want to get used to doing this in your D3 learning journey, as it quickly becomes necessary.
Next up: Adding elements →