La guía indispensable para el diseño de gráficas y visualización de datos – Parte 2

By Mark Ledwich
January 22, 2015

In part one of this series, we looked at chart design and specifically why, when and how to use certain charts over others. The cheat sheet offered a number of categorical comparisons and many insights into how to most effectively display values in order to produce actionable analytics for your organization.

However, displaying data becomes significantly more complex than the tips in the cheat sheet cover when there’s a need to show extra dimensions of information within the same visualization. It’s not always X and Y; sometimes Z joins the party as well.

Take the example below showing Olympic gold medals for the top 10 countries in 2008. A bar chart was a good choice here because it allows easy comparison and horizontal bars signal that there’s a ranking.

They’re not all that easy, though. Many new chart types need to be employed in order to adequately convey the depth that some analytics require.

As such, the descriptions below provide a few techniques for extending your visualizations with additional dimensions of data. Not only do they delineate chart types, but also examples of when to use them.

________

Technique #1: Stacked bars

Summary: Use when the extra dimension (bar segments) values contribute to a whole (total bar size). Also, the sum of the parts should be more important than comparing between them over different categories.

The good: 

Good way to show countries ranked by total medals, and to a lesser extent, show the gender makeup of those.

In this example, you can easily compare total medals, and see the makeup of gender per country. Comparing total women per country is difficult and, if that was the main purpose, then additional bars would work better.

(Apologies for gender stereotyped color here, but it is very helpful for readability.)

The bad:

That’s a bad way to show a leader board of countries at the Olympics.

The problem is that the total isn’t important when looking at medal types in the Olympics (gold is the most important medal for scoring).

Using bars for gold and silver because they’re less important than gold and don’t accumulate with it to create a total (below).

________

Technique #2: Additional bars

Summary: Use when it’s important to compare within a category and to a lesser extent across categories. It should only be a maximum of 5 bars per category. It’s similar to a multi-chart, but you might consider using a multi-chart if you have many categories and not enough horizontal space.

The good: 

Here’s a good way to show which countries are the best at particular sports.

You can easily compare which countries are the best at particular sports, and to a lesser extent how well each country does at one sport compared to another.

There are almost too many bars here, and series labels were required to make it readable (instead of a legend as used in the following example).

The bad: 

That’s a bad way to show which countries are the best at particular sports.

The main problem here is that our subject, “particular sports,” is spread across the entire chart instead of grouped. The reader must scan left to right seeking the appropriate legend color, e.g. aquatics, in order to find the highest bar. The grouping from the good example (above) saved the reader this effort. Also, with this many bars, you have to keep looking up at the legend, making it slow to understand.

Technique #3: Multi-chart

Summary: You can use this in combination with any of the other techniques to add an additional dimension. The dimension used to split charts should be the least important for comparison. This is the easiest way to add new dimension information without complicating the original visualization.

The good: 

Here’s a good way to show the percentage of woman compared to men over time for a selection of countries.

Consider that this example started out as a single percent stacked bar chart showing the total makeup of gender over time. By using multi-chart for each country, the original chart isn’t complicated, as long as there’s enough space. In this case, the extra dimension is important because the average hides the major differences between countries that make it up.

The bad: 

There’s a bad way to show the percentage of woman compared to men over time for a selection of countries

It’s very difficult to make a comparison over time in this chart. To avoid this scenario, order the dimensions-for-comparison by importance, as in gender, year and country. Also, use the last dimension to split into separate charts.

________

Technique #4: Multi-level axis

Summary: Use this when the additional dimension forms a natural hierarchy with what’s already on an axis OR as an alternative to multi-chart where you don’t need to compare bars across different categories. This is very similar to using multi-chart with the advantage that you can have more than one extra level (e.g. years, quarters, months, etc.). Also, it’s quite easy to create too many bars, so I advise you to be careful of this.

The good: 

Here’s a good way to give context to sporting events by adding which category of sport they belong to.

Because the disciplines belong to a category, adding this to the axis makes it easy to read by ordering and grouping them in this way.

There’s another good way to show top countries per sporting category.

This is better than the equivalent additional bars or multi-chart when you are more interested in the top counties per sport and are not interested in comparing how well that country does in other sports.

The bad: 

That’s a bad way to categorize country’s medals when you want to compare the same country across different categories

While this is the same chart as the second good example, the difference is in what is intended to be compared. Not having the countries clumped together makes same-country comparisons hard. Using a multi-chart will show clearly how well counties do across the different sporting categories (below).

________

Technique #5: Combination charts

Summary: Combining different chart types is useful when the additional information is another measure rather than a different dimension. Areas, bars and lines can be easily layered on top of each other, but use a different chart type when the values have a different axes or shouldn’t be directly compared. Also, bar markers and points are good when using the same axes of measurement as a bar and where the purpose is to give context to the bar values.

The good: 

There’s a good way to show the number of events on the same chart as individual countries

With a different measurement and axis range to the other lines, using an area for event count signals that it shouldn’t be compared directly. It’s good on the same chart if the numbers are correlated (and in this case they are.)

There’s another good way to show the prior results to give some context to current gold medals

The bar should show the most important measure and the bar markers are used to give the value some context. You can see clearly that Australia has done poorly compared to the prior year and Netherlands has done much better.

Note: only use a maximum of 2 bar markers on the same chart to avoid confusion.

Lastly, here’s one more good way to show a variety of measurements over time using area, bars, line and points.

Notice that Full Delivery % and On-Time Delivery % are both points to signal that they are directly comparable. Other measurements have different chart types because they can’t be compared.

For less clutter, a second chart with the same time scale could be used.

________

Conclusion

You can now go forth and use these techniques to convey extra information in a clear way (and without creating a monstrosity). With this power it’s important to remember the guidance from part 1 and show restraint when wanting to add new information that might not be required. Remember that every new element you add to the visualization is detracting from the clarity of original in some way.

We have covered plenty of ground in regards to static visualizations. These are some of the basic principles you should have before you can take full advantage of what is possible in an interactive dashboard.