Voronoï playground: animating addition/removing of data

This block experiments how to animate the addition/removal of data in a Voronoï map.

This experimentation leads to the d3-voronoi-map-tween plugin. A more recent bl.ocks uses this plugin.

In the starting Voronoï map, red cells correspond to removed/exiting data (i.e. cells not appearing in the ending Voronoï map). In the ending Voronoï map, green cells correspond to added/entering data (i.e. cells not existing in the starting Voronoï map). Blue cells correspond to updated data, i.e. cells existing in both the starting and ending Voronoï maps. Areas of blue cells evolve because the corresponding data values evolve.

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 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 interpolation value between 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’ coords 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 starting tessellation (appearing green cells should be nullified)
   32. else, if interpolation amount is 1, return ending tessellation (disappearing red cells should be nullified)
   33. else,
       331. interpolate each site’s coords 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 coords 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).
• 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
• blockbuilder.org