Skip to main content
SimilarExport ZIP
100%

Voronoï playground: Voronoï map (study)

✓ Published0🌍 Public
KKcnarf
Last edited Dec 19, 2017
Created on Nov 7, 2017

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.

AI-generated description

This block is a Work In Progress, which tries to implements a Voronoï map (i.e., one-level treemap) based on the algorithm presented in Computing Voronoi Treemaps - Faster, Simpler, and Resolution-independent. Because this algorithm requires the computation of weighted Voronoï, this block uses the d3-weighted-voronoi plugin.

Without going into details (cf. the scientific paper), at each iteration :

  • the weighted voronoi diagram is computed based on each weighted sites
  • then, each site is re-position at the center of its influence area
  • then, another weighted voronoi diagram is computed based on each weighted relocated sites
  • then, each site is re-weighted in order to fit its expected influence area

The algorithm stops when each site is no longer moved or re-weighted (more exactly, when each site is moved or is re-weighted below a certain treshold), or if a certain number of iterations is reached.

Notes :

  • only one level, no nested hierarchy
  • as stated in the scientifc paper, the algorithm reaches a stable state at approximatively 15%-20% of error (sum of differences between computed areas and expected areas is about 15%-20% of the total available area)
  • experiments show that near-zero weights are difficult to handle, causing flickering

User interactions :

  • you can choose to draw the Weighted Voronoï Diagram (default) or the weights (visualized as circles).
  • you can hide/show sites
  • 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 :

gpl-3.0 Licensed

Similar vizzes

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
95% match
Loading thumbnail…

Voronoï playground: Voronoï treemap (study 3)

This example shows a hierarchical Voronoï treemap, where nested data is partitioned into a circular diagram using weighted Voronoï cells. The visualization displays either the weighted Voronoï cells, the cell weights as circles, or both, with an option to toggle site visibility. It uses the d3-voronoi-map plugin to recursively compute one-level Voronoï maps for each hierarchy level, clipping polygons for child nodes as they are generated. The code builds on d3.hierarchy and d3.scaleOrdinal with the d3.schemeSet1 color palette, rendering the result as SVG.

KKcnarf
88% 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
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
86% 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
84% match
Loading thumbnail…

Voronoï playground: weighted Voronoï relaxation

This interactive playground demonstrates Lloyd’s relaxation algorithm applied to weighted Voronoï sites. Through repeated iterations, each weighted cell’s centroid becomes its new site, converging to an equilibrium. Users can toggle between drawing the Voronoï cells or the weight circles, show or hide sites, and switch among greyscale, radial rainbow, or conical rainbow colorings. The code uses D3.js v.4, the d3-weighted-voronoi plugin, and Canvas rendering with custom gradients.

KKcnarf
84% 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
83% 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
83% match