From streamgraphs to voronoi to polar clocks, there's essentially no limit to the types of data visualizations you can make with the JavaScript library D3.
That's no accident, said D3 creator Mike Bostock: “I wanted something that gave the designer greater control over the output—the kind of control that the early [data visualization] practitioners like Minard, Playfair and Bertin had because they did things by hand.”
D3's granular control springs from the Bostock's novel concept of “data-joins.” You can directly link an object you see on the screen (the points in a scatter plot, the gradient in a heatmap) with data. Change the data, and the object changes, too. When Bostock got a data-join working for the first time, “it was magic.”
The other revolutionary aspect of D3? It makes sharing data visualizations via web browsers much easier. D3 is built on several web standards—JavaScript, HTML, SVG, CSS, and DOM. “[M]odern browsers don’t have to do anything special to use D3, they just have to support the framework that the Internet has adopted for ease of use,” explains Malcom Maclean, author of D3 Tips and Tricks.
This boils down to a flexible tool for building whatever data visualizations you can dream up and sharing them with the world.
Today we're providing a guided path of resources to help you learn D3. If you're not familiar with the web technologies D3 is built on, don't worry—we'll show you how to get started from square one.
Start with the fundamentals
You might be tempted to immediately start tinkering with Bostock's massive collection of D3 code examples. But take a second to learn the basics first. We recommend getting a handle on the basics of HTML, CSS, SVG, etc. before diving all the way in. The examples won't make much sense if you don't know the foundations first.
You could go through tutorials on each individual technology, but this would take days! Plus, you'd be learning about them out of the D3 context. For a quick start, check out the resources below. They introduce how the technologies work together in the D3 world.
- [EBOOK] D3 Tips and Tricks (Malcolm Maclean)
- Intro to D3.js - Web Standards (Square)
- [SLIDE DECK] Technology fundamentals for D3.js - HTML, CSS, SVG, Javascript (Kanit Wongsuphasawat and Dominik Moritz)
- [VIDEOS] Introductory D3.js Course (Dashing D3.js)
Make a few charts
Once you know the basics of the web technologies D3 is built on, you can try out the official documentation and other tutorials that assume a base knowledge of web development.
- Official D3 tutorials (Mike Bostock)
- D3 for Mere Mortals (Luke Francl)
- Interactive Data Visualization for the Web (Scott Murray)
- Visualizing Data with D3.js(Kanit Wongsuphasawat and Dominik Moritz)
- Intermediate D3.js Course (Dashing D3.js)
Master binding data to selections
Remember when we mentioned data-joins? After learning the basics of the technologies, and trying out a few D3 tutorials, you'll be ready to take them on.
Unlike “regular” JavaScript—where you manipulate elements one at a time—D3.js allows you to handle groups of related elements, known as selections. As Bostock explains, “Working with elements en masse gives selections their power; you can manipulate a single element or many of them without substantially restructuring your code.”
It can be tricky to wrap your head around binding data to selections. These tutorials aim to help you bust through that conceptual roadblock.
- A visual explanation of the Enter, Update and Exit Selections in D3js (Tutorial Horizon)
- How Selections Work (Mike Bostock)
- Understanding D3 Selection Operations (Tech Time)
- D3.js tutorial - 2 - Select and Append (d3Vienno)
- Selections (D3 in Depth)
- Intro to D3.js - Data Binding (Square)
Tinker with examples
Now it's time to play with some code examples. Start by importing an example graph. Swap your data for the example data, and then modify one chart element at a time (axes, labels, tick lines, colors, orientation). Once you feel comfortable, move onto the next graph. This is how many folks, including Maclean, teach themselves D3. Malcolm explains why this process worked for him:
[A]ny one graph is just a collection of lots of blocks of code, each block designed to carry out a specific function. Pick the blocks you want and implement them.
I found it was much simpler to work on one thing (block) at a time, and this helped greatly to reduce the uncertainty factor when things didn’t work as anticipated.
Bostock's example gallery is expansive, but it can be hard to navigate. bl.ocksplorer.org allows you to filter examples by a specific API call (like d3.transition or d3.selection).
Keep learning
If you've made it this far, you should have a pretty good handle on D3. But the journey doesn't stop here. Here are some resources for getting unstuck and keeping up with the latest D3 news.
References
- D3 API Reference (Mike Bostock)
- D3 Cheat Sheet (Jerome Cukier)
- D3 Cheat Sheet (Scott Murray)
- D3.format tutorial through examples Vincent D. Warmerdam
Questions
News
- Data Visualization & D3.js Weekly Newsletter (Sebastian Gutierrez)
Simplify data viz hosting using Mode
Traditionally, creating a visualization with D3 requires you to set up a server to host the code and a web application to run it. Mode automates these tasks so you share D3-powered visualizations, without the hassle of setting up infrastructure.
To get started, sign up for a free Mode account, connect your databases, and visualize the data with Mode's HTML editor. Once your custom chart is complete, you can immediately share it with anyone—whether they're your coworker or the whole world!
Need a little inspiration? Check out how Mode customers are using D3 to share insights at their companies.
