Getting Started with D3
So, What Is D3?
D3 binds arbitrary data to a Document Object Model (DOM) and apply transformations to the document. Some tasks might be fairly simple, such as creating a table from an array of numbers. Let’s say we have this table of data about high-risk property in places where western wildfires have the potential to do a lot of damage. We want to display the contents as an HTML table and can do so with something like this:
The result is:
Neat, huh? We can also do much more complex visualizations. Say, for example, I wanted to use the above data to visualize the relationship between wildfires and the number of high risk properties for each state. In the case below, the size of the dot indicates the number properties considered high risk (the larger the circle, the higher the risk), while color indicates the percentage of properties that are high risk (determined by categorical coloring).
We achieve that with something like this:
No Excel. No Flash. No static images. Nothing proprietary. Just good, clean HTML.
I won’t be going through what all of this code does line by line. There’s a lot going on here, and going into detail about each element would result in a lengthy series of posts. Instead, want to point to several resources that I have found useful in learning D3 and that others might find useful as well.
Mike Bostock. Straight to the source. Mike is a computer science PhD student at Stanford University and now designs interactive graphics for the New York Times. Mike’s site has several examples for using D3, so spend some time perusing his site. Especially useful are:
- For Example
- How Selections Work
- Let’s Make a Map
- Working with Transitions
- Nested Selections
- Thinking with Joins
- Three Little Circles
Bl.ocks. Built by Mike, bl.ocks is designed as a simple code viewer. Using Github Gists, examples can be coded up and then displayed through bl.ocks. There are lots and lots of examples here, and a lot of the things I’ve learned probably started here looking at code. See, for example, Mike’s blocks.
Scott Murray’s tutorials. Scott is an assistant professor of design at the University of San Francisco and author of Interactive Data Visualization for the Web. The book started out as the online tutorials and serves as an excellent introduction to D3. There’s also a free online version of the book.
Stack Overflow D3 tag. Stack Overflow is your friend. Have a question about how to do something? Turn here first.
d3-js Google Group. Most questions should be directed to Stack Overflow, but the Google Group is fairly active and contains a lot of good information.
My D3 Pinboard bookmarks. My Pinboard tags for D3 are ever-growing, and contain a lot of tutorials, examples, and references. You might find some of these useful too.
I could go on and on, and you can probably expect to find much more (and more interesting) here on the site regarding D3 visualizations. But in the meantime, I hope these resources are useful for anyone just starting out.