d3-voronoi-treemap
This example shows an animated Voronoi treemap that transitions between two different weightings of global GDP data, with regions color-coded and labeled by country. The visualization moves between two hierarchies, demonstrating how cells morph and rearrange when weights are altered. The implementation uses `d3-voronoi-treemap` to generate the tessellations, `flubber` to create smooth polygon interpolations, and `d3.select`/`.append` for SVG rendering. The code computes two copies of the hierarchy, alters their weights, and pairs cells by name to animate the transition, with a checkbox to toggle inner cell visibility.
AI-generated descriptionThis block (a continuation of a previous one) experiments the use of @veltman's flubber d3 plugin in order to transition back and forth between 2 Voronoï treemaps (computed thanks to @kcnarf's d3-voronoi-treemap plugin).
The current result is not as satifying as expected, because (sometimes) some cells may move to one place to another one, making the overall animation not smooth/stable at all. This phenomenon appears almost everytime for inner cells. This has to be investigate ...
Acknowledgments to :
- D3.js (v.4)
- flubber d3 plugin
- d3-voronoi-treemap plugin
- blockbuilder.org
Data from this block.