How I Made That: Animated Square Pie Chart

Also known as waffle charts. Using animated transitions between values, you can allow for comparisons between categories.

The How I Made That series describes the process behind a graphic and includes code and data to work with.

I’m a fan of element-based visualization methods, because they tend to shorten the path from abstract data back to reality. So when I wanted to compare percentages across various demographics, I went with the square pie chart instead of stacked bars or standard pie charts.

I’ve made these in R, but this was the first time I made them using d3.js. I wanted animated transitions when you switched between different groups of people. Here’s how I made it.

To access this full tutorial and download the source code you must be a member. (If you are already a member, log in here.)


Gain unlimited access to hundreds of hours worth of step-by-step visualization courses and tutorials for insight and presentation — all while supporting an independent site. Source code and data is included so that you can more easily apply what you learn in your own work.

Members also recieve a weekly newsletter, The Process, which looks more closely at the tools, the rules, and the guidelines and how they work in practice.

See samples of everything you gain access to:

About the Author

Nathan Yau is a statistician who works primarily with visualization. He earned his PhD in statistics from UCLA, is the author of two best-selling books — Data Points and Visualize This — and runs FlowingData. Introvert. Likes food. Likes beer.