Skip to main content
100%

d3-voronoi-treemap

✓ Published0🌍 Public
KKcnarf
Last edited Jul 2, 2019
Created on Jun 28, 2019

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 description

This 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 :

Data from this block.

lgpl-3.0 Licensed

Similar vizzes