Skip to main content
SimilarExport ZIP
100%

Voronoï playground: animating the addition/removing of data on a Voronoï map

✓ Published0🌍 Public
KKcnarf
Last edited Nov 20, 2020
Created on Oct 28, 2020

This example animates transitions between two Voronoï maps, handling both data that persists and data that appears or disappears. Blue cells morph smoothly, while red cells shrink away and green cells grow in. The d3-voronoi-map-tween plugin interpolates site positions and weights, then recomputes each intermediate tessellation with d3-weighted-voronoi. Controls adjust the interpolation slider, toggle overall size or shape changes (using flubber), and display internal site radii.

AI-generated description

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 :
  4. if interpolation amount is 0, return a tessellation similar to the starting one (appearing green cells should be nullified)
  5. else, if interpolation amount is 1, return a tessellation similar to the ending one (disappearing red cells should be nullified)
  6. 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 :

  • <a href='https://d3js.org/'>D3.js</a> (v.6)
  • <a href='https://github.com/Kcnarf/d3-weighted-voronoi'>d3-weighted-voronoi</a> plugin
  • <a href='https://github.com/veltman/flubber'>flubber</a>
  • <a href='http://blockbuilder.org'>blockbuilder.org</a>
mit Licensed

Similar vizzes

Loading thumbnail…

Voronoï playground: animating the addition/removing of data on a Voronoï map

This visualization animates the transition between two Voronoï maps, showing how cell areas shift when data points are added, removed, or updated. Red cells mark exiting data, green cells mark entering data, and blue cells represent updated values whose areas change accordingly. A slider interpolates between the starting and ending tessellations, while a toggle reveals the underlying sites whose radii encode the data values. The implementation combines D3 v6 with the d3-voronoi-map and d3-weighted-voronoi plugins, computing interpolated site positions and weights via linear interpolation before rebuilding each intermediate map.

KKcnarf
95% match
Loading thumbnail…

Voronoï playground: Voronoï transitioning thanks to weighted Voronoï

This example demonstrates smooth transitions between two Voronoï tessellations of blue and green sites, where a slider adjusts the relative weights of each group, causing one set of sites to dominate the diagram and the other to fade out. It uses weighted Voronoï diagrams via the d3-weighted-voronoi plugin, with cells computed by a custom power diagram integrated with a convex hull algorithm and clipped to a circular SVG boundary. The animation updates cell polygons and site visibility in D3 v4, rendering SVG paths with a slider that recalibrates site weights to shift the tessellation.

KKcnarf
87% match
Loading thumbnail…

Animated Voronoï map 2

The example shows an animated Voronoï map that smoothly transitions from one set of site weights to another, with each cell maintaining its region across updates. It uses the `d3-voronoi-map` plugin’s `initialPosition()` and `initialWeight()` APIs to reuse previous coordinates and weights, enabling fluid live or static arrangements. Rendering is done on canvas, with a choice between drawing cells, weight circles, or both, and customizable color schemes that include a conical rainbow approximated manually since canvas lacks native conical gradients.

KKcnarf
87% match
Loading thumbnail…

Animated Voronoï map

This example demonstrates an animated Voronoï map that self-organizes over time, showing both live iterative updates and a static final arrangement. The visualization uses the d3-voronoi-map plugin (v2) to compute weighted Voronoï diagrams on a circular clipping polygon, with each iteration rendered on canvas. Users can toggle between drawing the Voronoï cells, their weights as circles, or both, and choose among greyscale, radial rainbow, or conical rainbow backgrounds. The code relies on d3.v5 and the d3-weighted-voronoi plugin, with user interactions handled through HTML radio buttons and checkboxes.

KKcnarf
86% match
Loading thumbnail…

Voronoï playground: Voronoï map (study 2)

This interactive Voronoï map demonstrates an algorithm for computing weighted Voronoï treemaps, where each cell’s area corresponds to a target weight. Users can toggle between displaying the weighted Voronoï cells, the weights as circles, or both, and can also show site locations and switch among grey, radial rainbow, or conical rainbow color schemes. The implementation relies on D3.js v4, the d3-weighted-voronoi plugin, and Canvas rendering, using heuristics to manage overweighted sites, mitigate near-zero weights, and reduce flickering during iterative repositioning and re-weighting. The map’s input data is generated procedurally with 20 sites, including a few outliers with higher weights.

KKcnarf
79% match
Loading thumbnail…

Voronoï playground : interactive weighted Voronoï study

This interactive weighted Voronoï diagram explores 2D additive power distances between two draggable sites, whose influence areas change via sliders adjusting each site’s weight. A background matrix displays distance values for every pixel, with unit-circles visualizing equal-distance boundaries. The D3 v4 code (d3.drag, d3.line, and range inputs) updates SVG cells, circles, and text labels dynamically, revealing properties such as sites leaving their own cells when heavily outweighed.

KKcnarf
79% match
Loading thumbnail…

Voronoï playground : interactive weighted Voronoï study III (multiple sites)

An interactive study of weighted Voronoi diagrams, this d3.v4 visualization shows four draggable sites (two blue, two green) and their influence areas, or cells, within a rectangular clipping polygon. Sliders control the weight of each color group, and unit circles around sites indicate their relative weights. The diagram is computed via a parabolic power diagram algorithm, with convex hulls and 3D-to-2D dual-point mapping, then clipped using the Sutherland–Hodgman method via `d3.polygonClip`. Cell polygons render in SVG with transitions, while `d3.select` manages user interactions.

KKcnarf
79% match
Loading thumbnail…

Voronoï playground: Voronoï map (study)

A Voronoï map study demonstrates an iterative weighted Voronoï treemap algorithm, positioning and re-weighting sites until their cell areas match expected sizes. The canvas rendering offers toggles for displaying either the weighted Voronoï diagram or site weights as circles, plus grey, radial rainbow, or conical rainbow color schemes. It relies on the `d3-weighted-voronoi` plugin and D3 v4, with user controls to show or hide site markers.

KKcnarf
79% match