Amidst the federal government shutdown coverage I saw an interesting chart on Slate comparing the percentage of essential employees between the 1995-96 and current shutdowns across a number of federal departments. Here is the original chart by Emma Roller.
Right off the bat I had a few thoughts about this. The bars seem pretty heavy, in particular considering they represent a proportion (the whole area above the bar is “filled” with non-essential employees). Using color to double-encode the year seems excessive: the bright blue and red stripes are hard to look at. I’m unable to discern any particular order that the departments are listed in. And why on earth do the percentage labels have two digits after the decimal point?
Here’s my first attempt at recreating this chart (e8140655d5), addressing the points above.
I like this a lot but there are still some problems with it. It’s hard to tell which department is which, especially for the ones with a high level of essential personnel. It’s also tough to compare departments to one another. I haven’t addressed the ordering issue. Oh, and the colors are still too busy.
I was thinking about how the data don’t seem to be arranged in any particular way, considering my options for ordering, when I remembered a neat little graph that can solve the several of these problems. It’s called a bump chart, and here one would show the two years as the two ends of a line chart, plotting all the categories on top of one another. It’s basically your standard line chart with only two data points.
To produce my first bump chart attempt (force-layout-labels) I spent too long tweaking a d3 force layout to make nice labels. The basic concept is to let d3’s force calculations space the labels out. They carry a little charge, preventing them from landing on top of each other. They have a link to the line they’re labeling to ensure they stay close.
Even after all of my effort the labels are still way off in critical sections of the diagram. I was about to declare defeat when I realized that a better strategy was to redefine it as victory. I shouldn’t be cramming all those labels in there in the first place.
The first rule is highlight what you want the reader to pay attention to. So for my next iteration (34f9788755), I finally get rid of those extra colors. The source article makes the point that all but three federal departments had a reduced level of essential employees, and the Department of Commerce had a drastic decline. It seems natural to highlight those four departments, leaving the others to the background.
There are still a few things I’d like to wrap up. The dots aren’t really necessary, and they make it hard to see some of the finer distinctions. There’s also a little thing that bothers me a whole lot here.
If you look closely, each of the highlighted lines has one background line actually running in front of it. This is a consequence of laziness and SVG draw order. The last thing you add to SVG is drawn on top, thus the line for NASA is drawn on top of the EPA.
Here is the latest (master), incorporating an easy change to remove the dots and an annoying kludge to ensure the highlighted lines are drawn last.
Simple and effective.
As always the current version of this visualization can be found live on my GitHub page.