There’s a lot more to D3! This is just a quick tour of some other stuff D3 has to offer.
Layouts and SVG Helpers
Some of these examples make use of D3’s layout helpers.
Some layouts convert our original data into descriptions of the shapes we want to draw. For example, the pie layout converts numbers into arcs (start and end angles for pie slices). This keeps our drawing code simple. Other layouts help us group our data so we can draw useful shapes like stacked stacked or trees.
D3 also provides helpers to make some of the more complex SVG shapes easier to draw. The path helper can build curves that interolate between data points. The arc helper can take the angles generated by the pie layout and draw arcs (pie slices).
A Pie Chart
Let’s start out by walking through using D3 to draw a simple pie chart.
First we get our source data:
We want each product to be represented as a pie slice in our pie chart, which
involves calculating the associated angles. We’ll use the
Now we have our data in angles (radians), so we can turn them into something
visual. The next tool D3 gives us is the
d3.arc which helps to create
<path> tags for arcs. This is where we provide all the information relevant
to actually drawing, such as the radius size.
One of the most common charts to draw is some variation of stacked bars. These are deceptively complex, because after the first layer, each new layer of bars depends on layout of the previous one.
The data requirements are also different because stacked bars need to have dense data sources. In most graphs, we could omit an empty value because it won’t be drawn, but in a stacked layout, that still could affect the layout of the next layer.
Let’s start we have sales of our products over multiple days.
Transformed into a dense array, our data looks like this:
Now we can take advantage of the
d3.stack to do the work of stacking
our layers on top each other. While normally a bar graph would have one
value, a stacked one has two:
- where a segment starts (“baseline”)
- where the segment ends
For the first layer stacked bar chart (at the bottom), the baseline is typically 0. It can be other values for things like streamgraphs, which are a whole other topic.
stacked will be a set of nested arrays containing the hights of the data in sales, stacked, which will come in handy when it’s time to draw these. For examples, the stacked data now looks like this:
But the data is not a plain array! It also has a few useful properties. The “rows” have
index and the computed start/end arrays also have
data – the original data.
Ok so let’s get to drawing! We’ll bring back our good friends
There are a few things that make this graph a little more complex. One of the hardest parts is realizing that D3 is really only going to hint at how we should stack the bars: D3 gives us stacked results in our data space, but not in SVG's coordinate system. We have to deal with the same confusing Y-axis coordinate flip.
D3 has a lot to offer, and our goal here was to give a brief tour and cover some core concepts! There’s much more to learn about D3, but hopefully this tutorial has given you enough so that you can teach yourself the rest.
There are lot of great resources for learning D3 out there:
First and foremost, D3’s own wiki. This is a great starting point for any D3-related exploration
Nestled inside that wiki, the D3 API Reference is great for remembering what APIs there are and what the various parameters mean.
For more examples of what is possible with D3 check out the D3 examples by creator of D3, Mike Bostock.
But don’t stop there! Google searches are a great way to discover things too. Happy visualizing!