This block illustrates the use of the d3-voronoi-map-tween plugin, which allows to smoothly animate back and forth between two d3-voronoi-map.
Considering the data coming from either the starting data set or the ending data set, each single datum has a corresponding cell in the starting Voronoï map and another in the ending Voronoï map. The objective of the plugin is to provide a way (i.e. an interpolator function) to smoothly interpolate between the starting cell and the ending cell of each data. To do so, we do not interpolate polygons associated to each single datum in order to no have a mess of overlapping cells (cf. this block for this easy-but-unsatisfying attempt). But we rather interpolate the characteristics of the sites producing each cell and then compute a Voronoï map of these interpolated sites (thanks to d3-weighted-voronoi). We also have to take care of cells found only in the starting Voronoï map (data only available in the startingd ata set) or found only in the ending Voronoï map (data only in the ending data set)..
What are you seeing :
show internals
gives some visual explanations on what is going on. It displays the state of each site (see below to understand what are sites and what are they used to). The radius of each site encodes the correponding interpolated datum’s value (as the cells area do). In the starting voronoï map, a disk shows the starting value of a datum; in the ending Voronoï map, it shows the ending value of the datum; in an intermediate Voronoï map, it shows the interpolated value inbetween the starting and ending values.The algorithm is the following:
evolving overall size
demonstrates that the plugin can handle animation between disks of distinct sizes; enabling it makes the ending overall disk smaller than the starting diskevolving overall shape
demonstrates that the plugin can handle animation between distinct shapes; enabling it makes the ending overall shape a pentagone; the smooth interpolation between the two shapes is handled with flubbershow internals
gives some visual explanations on what is going on, by displaying the status of each site.