One common method for visualizing numerical data is the dot plot, in which we can represent results for different groups in one line. They are a cleaner alternative for grouped bar charts because of the limited ink needed for encoding. Instead of using the lengthy bar, we can represent the data with a small dot. Additionally, because the value is encoded with position, the scale doesn’t have to start at 0. This allows zooming into the most applicable range and highlights the differences.

While the dot plots are useful for displaying data, they can sometimes be confusing or difficult to interpret, especially when poorly formatted. I worked on the PEW Research dot plot this week and enhanced it while transforming it into a dumbbell chart.

First, let’s take a look at the original visualization, where the answers to three questions are divided into two charts. Each chart focuses on the different categories of respondents — the top shows the differences between men and women, while the bottom focuses on the differences between parents. The visualization layout is minimalistic to the point that it makes it hard to read. Data points blend in with the background and secondary information, which turns this piece into a poorly aligned cluster of words.

Good data visualization solutions✔️

Elements that work in this chart

Using dots to encode a value

I like the limited ink usage due to choosing a dot plot over a grouped bar chart. This simplifies the layout and allows for faster scanning across the whole visualization. We can easily compare the answers among different groups (men, women, mothers, and fathers) or questions.

Constant color usage

Even though there are four categories presented, only two colors are assigned. The first chart shows the broader categories — men and women. The same color assignment is then repeated in the bottom chart, which narrows the categories to mothers and fathers, which are the subcategories of the previous ones. This is another solution that makes scanning the chart and cross-comparison easier.

Adding the label

In this chart, adding the labels is necessary because no information about the scale is included. But despite lacking the scale, adding the labels is a good design choice. Thanks to that, we can quickly compare results visually and get precise values simultaneously.

Bad data visualization choices❌

Elements that don’t work in this chart

Poor color choice

Despite being constant, the color assignment could be more intuitive and better contrasted. The yellow dot is barely visible, not to mention the label presented against the grey dotted line. Using a categorical scale, we should ensure that the color luminosity (in other words, its perceived brightness) is similar and that no color dominates.

Way of separating charts

Splitting the data into two sections duplicates many elements and leaves a lot of unused space. For example, the openings of the question differ in just one word (adults vs. parents) and can be easily combined into one sentence. Other examples are the questions themselves. They are relatively long and occupy a considerable space leaving the axis squished.

Lack of scale

The scale is an indicator that we are looking at the chart and initiating the analysis patterns. Not marking the axis’s beginning or end increases the time needed to understand the visual. Because it’s surrounded by text, we start reading it, which is not the way to go. Additionally, when you examine the data points, you’ll notice that the non-existing scale starts and ends at unusual places — 32% and 68%, respectively.

How to make this visualization better❔

Step-by-step improvements

Reorganize the chart

We can start by reorganizing the chart and simplifying its layout. In our case, we have four groups — men, women, fathers, and mothers. In order to make full use of the available data, we can change the organization of the chart and group it by questions rather than demographics. This will not only remove the repetitions and limit the space needed but also encourage to do a cross-comparison. Having one group (all adults) above the other (parents) allows seeing how it affects the perceived pressure.

Work on colors

The next step will be choosing different colors — the ones that have better contrast and are more intuitive. I went with stereotypical colors, blueish for men and pinkish for women. I’m not a fan of such simplification, but thanks to that, no one will have to double-check the encoding. Other advantages of this choice are good contrast and ease of distinctiveness. If you’re still not convinced by the assignment of stereotypical colors, other combinations will work as well. You can find them in Datawrapper’s article.

Add axis

Reorganizing the layout and leaving just the name of the group makes more space for the chart. This allows us to stretch the axis and add the scale. Because it’s secondary information, it doesn’t have to be prominent. Using even the faded color organizes the chart and makes reading it easier.

Improve readability

This is the most complex transformation, as the original chart lacked visual hierarchy and alignment. The first step is switching the placement of the labels. Instead of putting them next to the dot, we can place them above it. That is a cleaner and more precise way of marking the data point on the dumbbell chart. On each line, we have only one element of each color, which reduces the visual load and allows faster scanning and cross-line and cross-category comparison. The next step is removing the visual distraction of the dotted line. This will bring the focus to the data points rather than the line. Having the chart cleaned up, we can add elements that will help to understand it better. We can connect the dots and use the color of the category that has the higher share of those feeling great pressure. And lastly, we can strengthen the coding by repeating the color on the number showing the difference between the two groups.

Don’t wanna miss any of my posts? Get them directlyto your inbox!

And if you are not a part of Medium family yet, consider signing up for a membership. It only costs $5 per month, supporting thousands of writers. Sign up with my affiliate link, and apart from access to all published content, you will get my eternal gratitude.

About Incremental Improvements

This is a series dedicated to small changes that can be done to make a visual design better. In each post, I analyze the data visualization to see what works, what doesn’t, and how to improve it.

You can find the list of all previous makeovers here.