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

100%

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

✓ Published0🌍 Public

Last edited Jul 19, 2019

Created on Jul 6, 2017

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.

AI-generated description

This block experiments a new way to transition from one Voronoï tesselation to another.

Usually, this is achieved by smoothly changing the locations of sites from their original locations to their final locations, while recomputing the Voronoï tessellation during displacements. Here, I use weighted Voronoï diagram (the 2D additive weighted power diagram variation) to do the job. It gives a totally new feeling: the final tesselation seems to emerge from the initial one. The cherry on the cake, this technic allows to transition between tessellations of a distinct number of sites!

This block is a continuation of the experimentations 3, 2 and 1. It uses the d3-weighted-voronoi plugin.

User interactions :

the top left slider allows you to change the relative weights of blue sites and green sites; when blue sites overweight green sites, the voronoï tessellation only consider blue sites (and vice versa)
you can hide/show sites

Acknowledgments to :

<a href='https://d3js.org/'>D3.js</a> (v.4)
<a href='https://github.com/Kcnarf/d3-weighted-voronoi'>d3-weighted-voronoi</a> plugin
<a href='http://blockbuilder.org'>blockbuilder.org</a>
<a href='http://bl.ocks.org/mkedwards/'>mkedwards</a>'s block: <a href='http://bl.ocks.org/mkedwards/759e719eefe36cf9c8ab'>Treemap</a>

mit Licensed

Similar vizzes

Loading thumbnail…

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

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.

KKcnarf

87% 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

87% match

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

87% match

Loading thumbnail…

Voronoï playground : interactive weighted Voronoï study II

This interactive visualization explores the 2D additive weighted power diagram, showing how two draggable sites partition a rectangular area into concave cells whose borders shift as sliders adjust each site’s weight. The diagram is computed via a convex hull algorithm (ConvexHull.js, PowerDiagram.js) that lifts sites to a paraboloid, with the resulting polygons clipped using a Sutherland–Hodgman implementation from d3-polygon-clip. Rendered in SVG with D3 v4, the display updates live, and circles around each site scale with the square root of the weight to visualize its influence.

KKcnarf

86% 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

85% 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

84% 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

83% 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

82% match