Visualizing Ratios with Fluid Bar Charts

Displaying graphs of ratios is easy. Displaying graphs of raw values is easy. But can we do both, and still allow easy reading of the data? Yes: here’s how.

A Basic Approach Doesn’t Quite Work

Let me start with an example. Pretend I have three teams of designers working on three projects. Each project has a different number of milestones, some of which are complete. Let’s try visualizing this with two overlaid bar charts: empty bars for total milestones, filled bars for complete ones.

So far so good: this shows the raw numbers involved, and a completeness ratio is shown for each project. But the problem is that these ratios aren’t visually comparable: your eye can’t scan across and see that the first and second projects are equally complete. In fact, your eye will easily jump to the wrong conclusion: that the first and last projects are similar in completeness.

We could make the ratios themselves comparable by just graphing percentages on the vertical axis. But if we did that, the raw values will be lost:

Solution: Treat the Data as a Fluid

To show two kinds of data, we need two axes: vertical and horizontal. The former we’ll use for percentages, and the latter for raw values (n).

Since n will be on the horizontal, we start by rotating our containers so they run side-to-side. But we’ll still fill them from top to bottom:

Same data: just with flipped containers

Essentially then, we’re treating our data metaphorically as a fluid, with values that can slosh around inside their containers. (Where the area of those containers is “potential value.”)

Visually, these low and wide bars are not ideal though. They’re unlikely to fit into typical image blocks, and they also don’t allow very fine comparisons between the ratios. To maximize that, we need to emphasize the vertical direction. Again, we can simply squash all our containers to be taller but thinner, keeping the same areas:

Now we have something very recognizable. In fact, the third project looks just like it did at the beginning of the article: because we’ve only been performing distortions, nothing has fundamentally changed.

What We’ve Gained

Why is this better than a regular bar chart?

• The ratios can be directly compared visually, and are emphasized.
• Numerical values are still shown, but in terms of area, not height.
• The format is familiar, and the less critical information (values) can be ignored: anyone who can read a bar chart can read this too; and if they happen to be confused by the bar widths changing, they can still read the ratios just fine.

It’s Easy to Do

1. Calculate percentages from your original data
2. Graph the percentages as a bar chart, with containers around each fill
3. Modify the widths of each container/fill set, according to the “total” values
4. Rescale so you have good proportions

Try it yourself at home.

(NB: If you’re graphing averages, and ratios of averages, you need to be careful. Check out my article on the geometric mean for help.)