Photo by Clark Van Der Beken on Unsplash

One of the most interesting things that I’ve found is that working with advanced visualizations often requires a sharper design eye.

While bar and line charts have been around for decades, there may sometimes be situations where a different (and newer) visualization is more suitable.

In these situations, I’ve found that my design fundamentals have been tested, as this often involves taking multiple types of data and encoding it into a single visual. And to illustrate this, let’s talk about a chart that’s emerged in the modern day: bullet charts.

Bullet charts: combining quantitative and qualitative data

If you were asked to combine qualitative and quantitative data into a single visual, what might you do? One of the most common methods of this is to make use of what’s called an annotation layer.

This was a term coined by Amanda Cox at the New York Times to talk about adding text annotations to a graph to give more context or perhaps more qualitative insight.

An annotation layer over a bar graph

However, what if you didn’t have space to do that, like creating a dashboard? In that case, one thing that you could do is make use of what’s called a Bullet chart. The bullet chart, created by Stephen Few, seeks to encode quantitative and qualitative metrics in a single visualization through smart use of layers.

And it’s main use is to provide the context necessary to interpret data without relying on clunky meters or gauges that sometimes populate dashboards.

https://www.juiceanalytics.com/writing/ultimate-business-driving-machine

While it’s not necessarily the easiest thing for audiences to understand at first, once they learn how to read them, it can provide a wealth of knowledge that provides all of the necessary contexts at a glance. But to create bullet charts and understand how design plays a large role in this process, let’s look at all of the layers of data that we can encode with this single visualization.

Layers for quantitative and qualitative data

Bullet charts usually have four layers of information, all stacked on top of one another:

• The Quantitative scale, which is how your value is measured on a linear axis
• The Featured Measure, which is the primary performance measure
• The Comparative measure, which is what you’re comparing the featured measure against
• The Qualitative scale, which is encoded into several different ranges like bad, average, and good.

https://en.wikipedia.org/wiki/Bullet_graph

The first layer is what we’re used to seeing: it’s what we call the feature measure. This is, with bar charts, a way to quantitatively measure what a value is. The quantitative scale is usually paired with this to make sense of the value of a specific variable.

At this point, this is a simple bar chart.

From here, we can add a quantitative layer, which is called the comparative measure. This could be a measure that quantifies something like an industry average, a competitor’s performance, or your previous measure’s performance. This is a simple way of seeing if we’re doing better or worse than the value that we want to compare ourselves to.

Lastly, we use a gradient scale to talk about qualitative ranges of data. These are usually defined by performance thresholds, such as “Bad,” “Average,” and “Great.”

As a result, we can end up with a data visualization that provides a number and provides a lot of context as to what it means.

There are several key points encoded into a single graph:

• Our revenue in 2017 YTD was near $300,000
• We beat our benchmark, which was around $275,000
• That falls into the middle range, which is “Average performance.”

But designing a chart like this can be tricky.

Understanding gradients and contrast

If this seems pretty complex to you, you’re not alone: this is a complex and information-dense chart. But the amount of information that you can get from this, once you understand how it works, is beneficial.

Simple bar charts often live in a vacuum, which results in the question: “So What?” After all, knowing a number isn’t that useful unless you can put it into the larger context. So including that context can provide everything a person needs. But because this context is layered on top of one another, it can be vitally important to understand how to provide sufficient contrast for everything to be read.

A hard to read bullet chart

So here are some design tips if you want to make use of bullet charts.

Limit the number of qualitative ranges to five:

Given that color gradients categorize almost all qualitative data (i.e., thresholds), it can be hard for the human eye to distinguish between too many ranges. As a result, it’s best to limit the number of ranges to five to make it easier to read.

Make sure that the comparative and feature measures have sufficient contrast:

If both the comparative and feature measures are located within the darkest range, you can consider reversing the graph to stand out more among other values.

Provide contrast against other charts by reversing the direction

Use distinct intensities going dark to light of a single hue for qualitative performance measures:

Ideally, the performance measure should be in favorable states, which means we want the end of the dark bar to have contrast to a lighter background. If the measure is in a poorer state, then perhaps consider measures such as reversing direction.

The performance and feature measures are visible against the lighter background.

Design fundamentals for more complex data visualizations

The more I learn about complex data visualizations, the more I revisit the fundamentals of my design knowledge. Truthfully, you probably won’t be making bullet graphs regularly simply because you’re probably not working in an environment that requires extreme space efficiency regularly.

However, learning about bullet graphs has allowed me to practice and revisit, providing sufficient contrast more than many of my current design projects.

In these charts, we can encode an entire range of data in a single color or with a single hue: it can be rare that we get that sort of practice where colors are crucially important to your audience understanding something. So if you want a good exercise in color gradation, layering, and contrast, try exploring bullet graphs. They’re often a great way to not only learn how to encode data with color but make sure it’s easily understandable.

Kai Wong is a UX Designer, Author, and Data Visualization advocate. His latest book, Data Persuasion, talks about learning Data Visualization from a Designer’s perspective and how UX can benefit Data Visualization.

The UX Collective donates US$1 for each article we publish. This story contributed to World-Class Designer School: a college-level, tuition-free design school focused on preparing young and talented African designers for the local and international digital product market. Build the design community you believe in.