Last Build: 03/19/19 11:33am

Getting Started with D3.js

This guide provides a little background for getting started with D3.js. See the Data Visualization Resources and the Introduction to D3.js Observable notebook for more.

Web Technologies

Before trying to tackle learning D3.js, it helps to already be familiar with basic web technologies. The Mozilla Developer Network (MDN) guides are great for both tutorials and no-nonsense references:

I also recommend the following:

Here are a few other resources that may be useful for learning HTML and JavaScript:

There are many more options that can be found with a web search, especially if you prefer videos over text.

Remote Hosting

Small examples may be hosted via a combination of Github gists, bl.ocks.org, and blockbuilder.org.

The files required for the visualization(s) are stored in a gists, which is basically a lightweight git repository meant for sharing code with others. This should include an index.html file, and any other files and resources required by the code. See the Github Help pages for more information about gists.

To view the visualization, load the gist in bl.ocks.org. See the About page for how to view a gist on bl.ocks.org. Keep in mind there is sometimes a slight delay between the files cached by bl.ocks.org and those hosted on gist.github.com. If you want to modify the code and see live changes, load the gist in blockbuilder.org instead.

All of these websites use the gistid in the URL, with the primary difference being the domain:

https://gist.github.com/username/gistid
https://bl.ocks.org/username/gistid
https://blockbuilder.org/username/gistid

Small examples may also be hosted using Observable Notebooks as well. Many examples are being moved over to Observable, but it is still in beta. See the Introduction to D3.js Observable notebook for more.

For hosting an entire website of visualizations, use Github Pages. There are many guides for setting up Github repositories for Github Pages:

The course website is also hosted using Github Pages.

Local Development

Run a local web server to run and debug visualizations locally. This is especially important for loading data. There are many options for running a local web server.

The official D3 wiki recommends using npm to run the http-server package from Node:

npm install -g http-server
http-server &

It is also possible to use Python to run a web server. Use the SimpleHTTPServer module if Python version 2 is installed:

python -m SimpleHTTPServer

Use the http.server module for Python version 3:

python3 -m http.server

Another option is to develop in Atom and use the live-server package to launch a local web server.

For all of these options, run the local web server from the same directory as the index.html file. Access the website at http://localhost:[port] where [port] is the port number used by the web server. This is usually something like 3000, 4000, or 8080.