Create Layout Transitions with the D3 Update Pattern
Let’s dive deep into the world of d3 selections and update pattern to create layout transitions.
In the last article, we learned how to create a hierarchy layout from tabular data. This article is a follow-up where I will explain how to use the d3 update pattern to make transitions from a scatterplot to a pack layout, so our visualisations are more multidimensional and useful.
To see more clearly what we are aiming for, let’s look at some real-life example of layout transitions.
On the above chart, we see data points, each representing a country, plotted with x/y axes (population/surface area). This is an ordinary scatterplot where we can see the correlation between two variables. Additionally, we can assign size (CO2 emissions per capita) and color variables (geographical region).
Let’s see what happens when we mark some countries of interest and transition from scatterplot to pack and back.
Not bad. With a little bit of interactivity and motion, we gain a whole new dimension of analysis.
