Update & Animate a Voronoï map
This block (a continuation of a previous one) shows how to update an existing Voronoï map from an old set of weights to a set of new ones (in this demo, each weight is slightly updated). This is done thanks to the use of the initialPosition() API in combination with the initialWeight() API, that allows to reuse previously computed coordinates and weights (cf. the updateData function, and the first part of the loop function).
This technique offers several advantages:
- it allows to maintain each cell in the same region from one Voronoï map to another, leading to a smooth and human friendly transitioning
- it comes with performance enhancement, as the final layout is no longer computed from scratch and profits from the former computation
Also, it is compatible with both the live and static arrangement introduced in the v2 major release of the d3-voronoi-map plugin:
- live Voronoï map: displays the evolution of the self-organizing Voronoï map; each iteration is displayed, with some delay between iterations so that the animation is appealing to human eyes;
- static Voronoï map: displays only the final most representative Voronoï map, which is faster than the live use case; intermediate iterations are silently computed, one after each other, without any delay.
Take a look at the code of the ‘loop’ function to understand how to obtain the live and satic arrangement.
User interactions :
- you can choose to use visualize the live arrangement (default), or simply the static final arrangement.
- you can choose to draw the Weighted Voronoï Diagram (default), the weights (visualized as circles), or both.
- you can hide/show sites (hide by default)
- you can choose among different rendering (greyscale, radial rainbow, or conical rainbow (default, having hard-&-fun time to implement it because canvas don’t provides conical gradient)).
Acknowledgments to :