When Your Graph Is Too Smooshed to Read

You want to display a lot of historical data–great! But sometimes we have so many points in time that our graph’s labels get smooshy. In this post, I’ll show you a before/after data visualization makeover in which we selectively labeled a few key milestones in order to tell our story (and make the graph more legible).

Before

Here’s an epidemiologist’s before slide.

There are a lot of things going well in this slide already. For example, the graph already contained direct labels, the words classifications and deaths, rather than having a separate legend. Direct labels save viewers time because viewers don’t have to zig-zag their eyes across the slide and hunt for information. Direct labels are also better for people with colorblindness and for grayscale printing scenarios.

Another feature that was already working was the branding. This epidemiologist’s center used these exact shades of turquoise, blue, green, purple, red, and yellow across all publications. They also used Calibri in all publications. We didn’t need to change the colors or fonts.

Our priority on this graph was to make the line graph’s years easier to read. We wanted to avoid diagonal text, which takes longer to read than horizontal text. We also wanted to avoid the 9- point font. The years were barely legible for people sitting in the front row, let alone the back row. If nobody can read your graph, why bother?

After

Here’s our makeover. We:

Transformed the title into a subtitle;

Wrote a new title, which is purposefully short for a live conference presentation (we didn’t want the audience to be reading a lengthy title while the epidemiologist was speaking);

Deleted the vertical label on the y-axis;

Deleted the horizontal label on the x-axis;

Abbreviated the years (1985 to ’85) to save a little extra space;

Only labeled a few milestone years;

Added a few numeric labels along the line (e.g., 77,173 diagnoses in 1993);

Increased all font sizes to 18 (and a 32 title); and

Removed the logo.

Two techniques fixed our smushed labels. First, abbreviating years—from 1985 to ’85—saves some space. Second, only labeling a few years—’85, ’93, ’96, and ’14—saves space and focuses attention on the milestones of your choosing.

We intentionally drew the audience’s attention to ’93 and ’96 to tell our story and match the epidemiologist’s talking points, as described below.

Storyboarding for Live Presentations

Here’s how I envision the epidemiologist presenting the information. She would storyboard the information across three separate slides.

First, she would present this slide, and say: “We track how many people in the U.S. are diagnosed with and die from AIDS. This graph shows how many people were diagnosed and died between 1985 and 2014. In 1985, nearly 12,000 people a year were diagnosed with AIDS. In 2014, closer to 20,000 people a year are diagnosed with AIDS. And of course, there have been some ups and downs over the years, which we’ll talk about next.”

Second, she would present this slide, and say: “I’m sure you noticed this peak right away. Seventy-seven thousand people were diagnosed in 1993. In 1993, there was a peak in diagnoses, probably because we expanded our definition.”

Third, she would present this slide, and say: “1996 was another milestone year. Beginning in 1996, we’ve seen fewer deaths, probably because of the success of highly active antiretroviral therapies.”

In our makeover, the horizontal axis is actually legible, hooray!

We also transformed a single slide into three slides. The epidemiologist’s speaking points would be identical in both cases. Her pace would also be identical in both cases. She doesn’t need to talk any faster just because she’s got three slides instead of one. Only the visuals would change. Adding more slides doesn’t make my presentation any longer. Adding more slides guarantees that her audience’s attention is focused on the right part of the graph at the right time.

Have you encountered smooshed line graph labels in your own projects? How have you fixed this common problem?

Bonus: Download the Spreadsheet

Want to see how I selectively labeled a few key points on the horizontal x-axis? Download the spreadsheet.