Stacks

This is a stacked bar graph showing changes over time in some (made up) measure, broken down into its component parts (Things A to D). The static version would be OK, but a bit limited – it would show a total pretty well, but it’s hard to compare the changes in the component parts as (with the exception of whichever series you choose to go along the x axis) they all start at different heights. So what this graph does is allow you to choose the component parts you’re interested in and just compare those. That allows the user to identify which parts are driving the change in the whole. Click the squares at the top to show or remove the different slices of the chart in whichever combination you like (the numbers are nonsense, obviously).

Most of the graphs I’ve done so far allow the user to look at one thing, then another thing, then back to the first thing, maybe via some third thing, the advantage being that it’s all in the same space on the screen. That’s handy. But this allows the user to look at things in different ways, according to their preference, and that’s subtly different. And, I think, better.

(edit: Just struck me that maybe the difference is just quantitative, as there are simply more options to view. This graph has 4 different views, for all its seeming complexity. The one above has 15).

As always, it’s done using D3, and builds on the principles in this graph. The main challenge is getting the bars to move around when you remove others, but that’s pretty straightforward after a fashion. The code is a bit repetitive, but the main thing I wanted to avoid was writing code for every possible permutation of the four components separately and I managed that so I’m happy enough.

Comments are closed.