What's wrong with pie charts?

And how to build them with R, Python, D3.js or React anyway

The Pie chart is for sure the most controversial type of chart. It is both one of the most used chart type

¹

, and the most criticised one.

By the way, this is a pie chart in case you never heard about it 😊:

A basic pie chart built with D3.js and React (see code)

Before we start

Before we start arguing about an eternal dataviz debate, I asked chatGPT to write a short poem about pie charts ❤️:

Pie charts, oh so sweet, 
Dividing data in a treat, 
Slices of information complete, 
Visualizing, oh what a feat.

I was wondering if it would communicate a negative opinion on the topic, but it actually went pretty friendly with it!

I must say I’m quite surprised, since chatGPT is mainly summarising what’s written on the internet 🤔.

The worst pie

If you’re looking for a bad chart one day, I can’t recommend enough browsing the WTF Visualization project. It’s a gold mine.

I think I found a good specimen featuring how bad a pie chart can be! 🎉

I think it got them all: 3d, exploding slices, poor colour palette, double colour encoding, not summing to 100. At least labels are located next to each slice.

Those are the most common pie chart caveats.

²

But does it prove that pie charts must be avoided?

Not for now!

It just means that those issues made popular by Microsoft Excel are terrible and did not help for the reputation of pie charts.

The ultimate proof?

When I have to explain why pie charts must be avoided most of the time, I really like showing this figure.

Check those 3 pies, can you spot what’s the pattern in the dataset?

Can you spot a pattern here?

Now..

Check the exact same dataset represented using 3 bar plots.

The pattern is probably easier to find now, isn’t it?

Much more insightful isn’t it? As humans, it is very hard for us to read angles.

Comparing bar sizes is much easier and that’s more than enough of a reason to avoid pie.

Not all pies are bad

It’s true that in some conditions pie charts are not necessarily evil.

If you have just a couple of groups to compare with obvious differences, it can make the job. People are really used to it so they will understand your message. Make sure to avoid the common caveats mentioned above though.

Building a pie chart

In the past years I already wrote tutorials explaining how to build pie charts with R, Python and D3.js.

Today I’m glad to share a new tutorial, explaining how to implement one with React, the most widely used javascript library for building user interfaces.

It covers all the required steps: data format, component skeleton, d3.pie and d3.arc explanations, inline labels, hover effect and even data transition with animation.

At the end, I even explain how to use shape morphism to create a pie to bar transition:

A pie chart to barplot transition. See code.

And that’s it for today! Hope those little pie examples can help you in the future!

Cheers,

Yan

PS: the newsletter format is very new for me. Was this post interesting to you? Any topic you would like to read about? Please hit the reply button!

1. See the visualisation universe that track google searches about chart types.

2. The data-to-viz caveat section showcases the most common errors made in data visualization