The ONE rule for chart selection

This week, I wrapped up an intense workshop on creating custom interactive charts with D3.js. It went really well—participants loved the material! 🎉

At one point, we built a treemap with a hover effect.

Amidst the flood of programming questions, one student asked something interesting:

When should we use a treemap instead of a barplot?

Great question! Let's break it down.

Barplots: Great for Rankings

Imagine you have a dataset with two columns:

• A categorical variable (e.g., country names)
• A numeric variable

With this, you could easily create a barplot:

Now, let me ask:
Which country has a higher value—Spain or South Korea?

...

That's easy to answer! Bars are aligned and ranked, so it takes only a split second to spot that Spain is above South Korea.

The Problem: Proportions

Now, what if I ask:
What proportion of the total does the US represent?
Check the barplot again, and try to answer!!

Here is a picture to take some real estate and make sure you don't read the answer right now:

😳 Tough, right?
You'd need to estimate the size of the US bar and divide it by the sum of all the bars—something our brains aren't wired to do.

Enter Treemaps

Treemaps solve this problem by representing each category as a rectangle, where size is proportional to its value.

Here's a treemap for the same dataset:

Now, if I ask about the US proportion again, it's simple! The left-most rectangle takes about one-third of the total area.

But if I flipped the question and asked for the ranking of Spain and South Korea? That's almost impossible—our eyes struggle to compare unaligned rectangles.

The Takeaway: Start with Your Question

The most important rule for choosing a chart type is simple:
Focus on the question you're trying to answer.

In all my educative projects, I group chart types by the type of question they address, using color to keep it simple:

For more examples like this treemap story, check out data-to-viz.com—it's what the site is all about!

See you next week!
Yan