Chart Makeovers, Fed IT Dashboard edition

This is the third in our series of topical reviews of the Federal IT Dashboard. As Ken noted in his discussion of Flow, we see this publicly-available dashboard as an opportunity to share some thoughts on ways to evaluate and improve dashboard design, while acknowledging the hard-work and challenges that went into its development.

Today we'd like to take a quick tour of the charts in the Dashboard and ask three questions of each:

  1. Is it the right chart for the data being displayed?
  2. Is the chart designed to communicate effectively?
  3. How would we redesign the chart?

A column chart is used to display the top departments by IT spend.

Federal IT Dashboard column chart

They've chosen an appropriate chart for the job, though we often will go with a bar chart over a column chart. Bar charts tend to use space more effectively because the category labels can be wider. Notice how all the Federal Agency labels had to be compressed into an abbreviation (e.g. DOD, DOC, DOT, DOJ), almost requiring a beltway-insider to translate.

One quirky feature is that the y-axis is labeled "($) Billions" but there are no values on the bars (on rollover, a tooltip shows the values with "$B").

Finally, the chart uses animation when it is first displayed to grow each of the bars from the baseline. This is a useful effect that emphasizes the largest values which keep growing after the others stop. Not as useful: the reflection effect under the chart doesn't help with comparing column sizes.

Our redesign of the chart would include more explicit labeling and the total IT spending at the top.

Federal IT Dashboard bar chart

Pie charts are used to show the distribution of performance of IT projects.

Federal IT Dashboard pie chart 3

We've said a lot of mean things about pie charts over the years. We arenotalone. Nevertheless, pie charts can have a legitimate place in presenting data. Here's how these pie's fall flat:

  • At their miniature size, the relatively proportions are hard to see.
  • On the summary page, there is no legend or labeling to provide any meaning. I appreciate that green is good and red is bad, but what are the definitions for those colors?
  • As always, a 3d pie chart distorts values by making the "closer" slices seem bigger.
  • Readers will find it difficult to compare across the three pie charts.

An alternative to multiple pie charts in this situation is a stacked bar chart:

Stacked bar chart

Line and area charts are used to display trends in project performance.

Federal IT Dashboard line and area charts

These charts are appropriate and reasonably well executed. Our concerns would be with the design: the labeling isn't efficient for the limited space, the lines colors aren't high contrast, and the entire chart feels like it was compressed into too small a space. Here's our take on it:

Federal IT Dashboard line charts

A treemap is used to show the composition of projects and/or spend based on agency, functions, service groups, etc.

Federal IT Dashboard treemap

Is this the right chart for the job? Most definitely. Treemaps are awesome at displaying hierarchical data that can be summed at each level. It provides a comprehensive view of IT spending composition while allowing you to see changes and drill-down for more detail.

The design of this treemap needs refinement. The developers used the out-of-the-box version of our JuiceKit™ treemap, so we have room for improvements in our default settings. For example:

  • The borders on the boxes are clumsy and distracting. We've started to de-emphasize the border with white or light grey.
  • The label names provide very little value as most of them are a truncation of the word Department. A narrower font at normal weight would help. Creating an alternative label that leads with useful information would be better: "Commerce" rather than "Department of Commerce."

Here's a treemap demo that feels a lot cleaner from a design perspective:

Airline treemap

All in all, the Fed IT Dashboard does a fine job of choosing appropriate visuals and keeping the chartjunk low. Here are a couple good source to help with these decisions: