When Graphs Get a Bad R.A.P.

​Every so often, I come across a graph that doesn't look quite right. Sure, the chart can be labeled appropriately and is not drowning in distracting visual elements, like excessive gridlines or tick marks. And yet something about the chart's design is off, making it difficult to read and interpret.
 
Take this chart, for example: 

Data Source: Adapted from http://racetolead.org/wp-content/uploads/2019/02/WOC_Race-to-Lead.pdf. (The original chart was embedded within a publication, so identity groups were defined earlier in the report. Persons of Color included individuals who self-identified as African-American, Black, Latinx, Native American/Indigenous, Asian, Pacific Islander, Multiracial, or some other non-White race.)

The chart has a relatively simple design that showcases the data. Moreover, the designer of the visual took care to apply a consistent color palette.
 
If you take a closer look, however, you will notice that the chart layout is extremely misleading. One would expect the percentages in each salary group (i.e., $0 - $50,000; $50,001 - $100,000; $100,001 or more) to add up to 100%...but they don’t.  

​Rather, the percentages in each identity group (i.e., Women of Color; Men of Color; White Women; White Men) total to 100%. 

(Yes, I know, the percentages in the Women of Color group total to 101%. Someone was a little rounding happy when reporting these data.)
 
But this information is not presented in a clear and visually appealing way.
 
In effect, this chart suffers from a BAD R.A.P. 

R.A.P is an acronym for three of the most important design principles:
 
Repetition. Repeat visual elements (e.g., color, shape) throughout a design.

This creates a sense of consistency and continuity.
 
Alignment. Arrange elements in a logical pattern or grid format.

This will improve design readability and create a sense of unity among the elements of a design.
 
And

Proximity. Related elements should be grouped together, while unrelated elements should be spaced further apart.

Doing so reduces visual clutter and improves the readability of the design.

How does the chart measure up?

Eh, not so great.

So, what should you do?

When redesigning this chart, I thought a lot about how I could use repetition, alignment, and spatial proximity to improve the visual appeal of the design and better communicate the data.
 
What I Did (in Excel):

1. Reorganized the chart layout. I used Excel’s Data Bar feature (a 2D stacked bar chart would also work here) to create 12 small charts for each salary category with the same scale. (I made sure that the individual charts were left-aligned.)

2. Removed the legend and instead opted for title labels.

3. Rather than label each bar, I added a label to the left of each bar.

4. Kept the salary category labels as is.

5. Applied a custom font. (I applied the same font used to produce the original chart: Whitney; 24pt (semibold) for the title labels and 18pt (light) for the salary + data labels.)

6. Customized the color palette by matching both data and font label colors to each color-defined Identity category in the original chart.

 
The end result? A simple but effective display:

​How does the redesign measure up?

Related categories are grouped together in a meaningful way:

Each chart has the same axis range (0 – 100%), which creates a sense of uniformity:

Identity categories and bars are color-coded and appropriately labeled.

*AND* the horizontal layout of the design facilitates easy comparisons between groups.

To complete the redesign, I would recommend adding a title that contextualizes the display...And voilà:

When something about a chart's design seems off, check whether it follows the R(epetition) A(lignment) P(roximity) principles of design.