This is the first part in a series where each article breaks down a recent design from the Viz of the Day Tableau Public gallery. I have chosen work I liked and designs that already had a lot going for them. I also appreciate that, depending on the software you use for a data viz, there may be technical limitations in what you can achieve. My intention is not to trash the work of others, but to use great work as a starting point and look at ideas for how we can push the designs to the next level.

The Original: Anti-Asian Hate Incidents in America

This visualisation stood out to me for its message and nice use of an editorial, journalistic aesthetic. The serif typography with black and pale taupe, 2-colour palette gives it a sleek simplicity and authority.

The original is larger than this, but I’m just focusing on the top half of the visualisation.

But I could also see a lot of details that could be tweaked to improve the design. Here’s my version:

Now let’s look at some of the design rationale and decision making behind the changes I made.

Layout

The first thing I did was to tighten up the 3-column layout. The alignment may appear OK on first glance but with a grid imposed you can see the columns of content are not evenly spaced.

Unequal spacing of columns.

Working with the grid, I snapped everything in line and also found the opportunity to align the button, Report an incident, to the third column.

Aligning to a three column grid.

Typography

I used Google web fonts to illustrate how far you can go with free resources. When choosing Google web fonts I set the font properties filter to show only typefaces with 8–9+ number of styles. This is a quick hack for filtering out lesser quality fonts, as typefaces with many styles have almost always been designed to higher standard.

Filtering Google web fonts.

The original design is almost entirely in Georgia, Regular weight. While I appreciate the simplicity in the approach, there are too many specific jobs to be done for one font. Serifs are not a great choice for small type on data visualisations. They’re also designed to work well small or large, and can’t be designed to be optimal for both (unless you find a serif typeface with a specific headline style, such as Tiempos or Financier).

I used Playfair Display Bold on the title. Playfair has a high contrast between the thick and thin strokes, which gives you a more striking and elegant look in a headline.

Playfair Dislpay — a high contrast serif font.

For the numbers, I picked Barlow Condensed. I like using condensed fonts for large figures in data visualisations as you can get them big without taking too much width, as well as looking authoritative and eye catching.

Barlow Semi-Condensed is used on the x-axis of the two charts. The condensed font helped fit “Nonbinary” without reducing font-size too far. The standard Barlow font is used on the small numbers above the bars — there’s nothing to gain here from using the condensed styles as the numbers are small this would only make them less readable. Barlow is also on the labels above each stat and graph where we just need something neutral and clean.

A range of styles from the Barlow typeface serve a range of purposes.

It’s conventional advice to suggest only using a few fonts when designing. This is fine when starting out and for certain work like UI design, but eventually you will find the limitations in this approach. As long as each font and typeface is selected with a function in mind, that will help keep things focused.

Relating to typography, I noticed the body text below the title comes across as uninviting — a dense block of small type with a long line length. By editing it down to the essence, I could set a short paragraph at a larger size with a more generous line height. Less is more (likely to be read), as they say.

Editing text to the essentials opens up lighter, more inviting typography.

Colour

I took the hue of the original background colour and increased the saturation and slightly increased the lightness. The original looked a bit drab, and just needed a slight tweak. Using the same hue again, I made a gold colour for the bar charts by decreasing lightness and saturation. The original palette of cream colours used on the charts did not provide enough contrast against the background.

Finally, taking the lightness even further down gave me a charcoal for the type and the bars I wanted to highlight. Using pure black for type is too harsh on a white background and when you have an off white background then you should inject your black with colour from this hue. In fact, all the colours in the redesign have the same hue, which is a sure fire way to tie your palette together.

The updated colour palette centred on the same hue.

Charts & Stats

I replaced the pie chart with a bar chart. Pie charts use area, arc angle and colour, which all prove tricky for quick comparison. Comparing straight lines is easy.

By setting the two bar charts together we also enabled a nice visual effect where both could be easily comprehended together. It’s now clear that Chinese women are disproportionately affected by hate incidents in America. A fact that’s not apparent at a glance from the original.

I widened the bars so they would more comfortably fill the available space. Finally, I made the labels a Bold weight and the values above the bars Regular. First we will be asking ‘who?’, before we ask ‘how much?’, so the type hierarchy reflects this.

Removing the bar chart improves the ability to compare within and across charts.

I like to set decimal places, like the .4 in 10.4, in superscript. The difference in scale and baseline adds visual interest. More importantly, it means we always read 10 first, and avoid potentially reading 104.

I switched the order of the stats to solve a couple of issues. First, I moved the intro type to the top left so it would sit more logically as the first block. The “Total Incidents” stat is really an aside, as it’s mentioned in the intro text.

Second, in the original I initially read “Business CA” as one string. This is a common issue when elements are not given the appropriate breathing space. By switching the two over we create enough space and a string that doesn’t potentially read as a connected phrase.

Third, I made the dividing lines under the label titles much thinner and closer to the background colour. In the original they stand out creating unnecessary visual noise, distracting you from the stats underneath.

Considering what constitutes visual noise or how something may be misunderstood.

Et voilà!

That’s it for part 1. If you found this useful, then it would be great if you could give a like or retweet on the Twitter thread.

You may also be interested in my newsletter, sending these tips and design insights straight to your inbox.