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 and download the source code you must be a member. (If you are already a member, log in here.)
Gain instant access to 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:
More Tutorials See All →
How to Make a Graph in Adobe Illustrator
You can use the vector-based software normally reserved for designers and artists to make and edit charts.
How to Make a Contour Map
Filled contour plots are useful for looking at density across two dimensions and are often used to visualize geographic data. It’s straightforward to make them in R — once you get your data in the right format, that is.
How to Make an Animated, Self-Sorting List
You have a list of things that can be ordered by different values. Let them sort themselves out.