Interactive Data Visualization for the Web, 2nd Edition

Chapter 4. Setup

Getting set up with D3 is pretty straightforward—a simple matter of downloading the latest version, creating an empty page in which to write your code, and, finally, setting up a local web server.

Downloading D3

Start by creating a new folder for your project. Call it whatever you like, but maybe something like project-folder.

Then place the latest version of D3 into that folder. Go to https://d3js.org, click the link to download the latest version of D3 as a ZIP file, and then decompress the ZIP file. As of this writing, the current version of D3 is 4.5.0. Move the file d3.js into your new project folder.

In that folder, you’ll also see d3.min.js, a “minified” version 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 standard 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). The choice is up to you, but in this book, I use the standard version.

Referencing D3

Now create a simple HTML page within your project folder named index.html. Remember, HTML documents are just plain-text files, so you can use the text editor of your choice. Free editors like TextEdit and Notepad are fine, but your life will be easier if you use an editor designed specifically for working with code, like Atom, Brackets, or Sublime Text (among many others).

If your editor ...