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.
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, you must be a member. (If you are already a member, log in here.)
You will get unlimited access to step-by-step visualization courses and tutorials for insight and presentation — all while supporting an independent site. Files and data are included so that you can more easily apply what you learn in your own work.
Learn to make great charts that are beautiful and useful.
Members also receive a weekly newsletter, The Process. Keep up-to-date on visualization tools, the rules, and the guidelines and how they all work together in practice.
See samples of everything you gain access to:
More Tutorials See All →
More on Making Heat Maps in R
You saw how to make basic heat maps a while back, but you might want more flexibility for a specific data set. Once you understand the components of a heat map, the rest is straightforward.
How to Make a Heatmap in Excel
Heatmaps quickly translate data tables into a visual form, making them a great tool to explore a new dataset.
Transitioning Map, Part 2: Refining the Format and Layout
How to make a more readable and more visually accurate map, before you dive into the big transitions.