You may have seen our first and second place winners of data visualization format of the year: Interactive Calculator and Interactive Map, respectively. While our third place winner isn’t technically a data visualization format, it’s something that’s imperative to all good visualizations: the formatting itself!
We’d love to say that in 2016, all data visualization were clear, engaging and downright beautiful. The technology and information needed are certainly out there in this day and age. Though we wouldn’t be having this conversation if that was the case. And, unfortunately, even some of the most innovative data visualization concepts let themselves down when it comes to the design.
‘But who cares about the design so long as you’re getting the message across?’, you might ask. But that’s just the thing… the design is ultimately how the data is communicated. We’re talking about data VISUALIZATIONS here. And a bad design often results in bad communication.
Corporate brand guidelines rarely cover data visualization formats. An organization’s website and email templates may be really distinguished… But all those beautiful brand assets and that pixel-perfect consistency tend to fly out the window when it comes to annual reports, interactive data formats, Annual General Meeting (AGM) presentations, infographics, research papers and basically any other collateral that data is presented in. And even if you send these works to a designer, they’re probably not a data expert.
A data visualization style guide can ensure:
These factors work together to make for visualizations that are intuitive and can be more quickly and easily digested.
Relationships between data can be readily identified and trends uncovered – without inflicting the frustration of a person who’s been concentrating on one thing for the past three hours to no avail… Basically, the reader is able to spend less time trying to understand what’s going on and more time putting the new found insights to use.
Here’s just one example of how a bad design can impact the communication of data…
In the ‘Before’ image, we see the data – but it is not intuitive to digest. And it’s certainly not pretty, to say the least.
The colors used to differentiate the categories in each pie chart in the ‘Before’ image aren’t consistent throughout the pie charts, even though the categories are the same. In other words, if you looked at one chart and identified the AV category as ‘teal green’ and scanned the other charts for ‘teal green’ to compare, you’d be interpreting the data wrong as the AV category is lime green or orange in other charts. Keeping this the same, especially where different data sets are displayed in the same page or viewing space, is a simple way of reducing the time taken to interpret data. Thus, it’s a simple way of communicating better.
There are a number of ways the ‘After’ image reduces clutter and makes for an easier read. These ways can be attributed to the best practice methods outlined within a data visualization style guide. To name a few:
The ‘After’ image also goes above the standard recreation of numeric and text data into a visual. The ‘Revenue in Pipeline’ section in the ‘Before’ image cites some figures… but provides no context to the timeframes in which these figures relate to. In the ‘After’ image, all these figures are still there… though with the addition of a line graph depicting the fluctuations over time, along with hover over labels containing the start and end dates for the data. With the addition of a simple line graph, a lot more insight can be gained, and the data truly tells a story. A good data visualization style guide helps the developer choose the right chart for their data set by questioning the purpose of the data. Had the developer of the ‘Before’ image been asked these questions, perhaps he/she would’ve realized the data is near pointless without a timeframe…
The GOOD: Here are some best practice examples of data visualization style guides and their features.
1. This Tableau Style Guide features tabs for each chart and graph, in addition to the general guidelines. On each tab, there is an explanation of the chart and when it’s best used, color information about the categories, background and text, font style information for consistency and legibility and a live example to show you how it’s done.
2. Urban Institute’s Data Visualization Style Guide outlines the color combinations for both categorical and sequential data sets and for the number of categories used in the visualization. Though when it gets to seven categories, it comically shows this gif and then suggests to consider breaking up the data or consolidate some categories:
Now … Have a look at these BAD data visualizations and imagine how they might’ve looked if they’d followed a data visualization style guide.
These, among many other reasons, are why Data Visualization Style Guides are a true hero to all data viz formats. And also why they get our bronze tick of approval for best data viz formats of 2016. From interactive data visualizations to annual reports – data viz style guides ensure design doesn’t sacrifice your data message; and your data message doesn’t sacrifice your design.
Give us a call on 03 9416 3033 (AUS) or +1 (650) 646-3793 (USA) to find out how we can help.
Or take your query straight to our inbox at email@example.com
Want to keep looking? Find out about Data Visualization Style Guides here.