d3-voronoi-map-tween usage

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 :

• blue cells are cells available in both the starting and ending Voronoï maps, i.e. data both in the starting and ending sets; these cells smoothly evolve in order to reflect their starting and ending weights, which may be distinct
• red cells are cells available only in the starting Voronoï map, i.e. data only in the starting data set; these cells smoothly disappear
• green cells are cells available only in the ending Voronoï map, i.e. data only in the ending data set; these cells smoothly appear
• when activated, 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:

1. compute the starting Voronoï map of the starting data set; it requires some (undisplayed) iterations, and the final tessellation allows to retrieve starting sites’ positions and weights; those starting sites allow to recompute the starting Voronoï map in 1 iteration using the d3-weightedVoronoï plugin
2. (quite similar to 1.) compute the ending Voronoï map of the ending data set; the final tessellation allows to retrieve ending sites’ coords and weights; those ending sites allow to recompute the ending Voronoï map in 1 iteration using the d3-weightedVoronoï plugin.
3. compute the interpolated Voronoï tessellation (between the starting tessellation and the ending tessellation) for a particular interpolation amount :
   31. if interpolation amount is 0, return a tessellation similar to the starting one (appearing green cells should be nullified)
   32. else, if interpolation amount is 1, return a tessellation similar to the ending one (disappearing red cells should be nullified)
   33. else,
       331. interpolate each site’s position and weight (a simple LERP function is used); be careful on disappearing cells and appearing cells
       332. compute the interpolated Voronoï map, using d3-weighted-voronoi with these interpolated positions and weights

User interactions :

• use the slider to see the intermediate Voronoï maps, from the starting one (at left) to the ending one (at right).
• 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 disk
• evolving 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 flubber
• show internals gives some visual explanations on what is going on, by displaying the status of each site.

Acknowledgments to :

• D3.js (v.6)
• d3-weighted-voronoi plugin
• flubber
• blockbuilder.org