K-Means Voronoi Relaxation

100%

K-Means Voronoi Relaxation

✓ Published0🌍 Public

Last edited Oct 6, 2016

Created on Oct 6, 2016

This interactive visualization uses k-means clustering and Lloyd’s algorithm to relax a Voronoi diagram, normalizing the dispersion of 20,000 random points across 100 polygons. As the animation runs, each polygon’s center moves toward the centroid of its assigned points, equalizing polygon populations over successive steps. The SVG rendering uses D3 v4’s `d3.voronoi` for polygon generation, with color scaling from white to black indicating point density per cell, and text labels showing live counts. Buttons control start, stop, and redraw actions, while deviation statistics update in real time.

AI-generated description

This is an experiment in moving and shaping voronoi polygons to normalize the dispersion of points. The idea arose while <a href="http://bl.ocks.org/alexmacy/6272668a45ce0f8a1fed7880814bc21e" target="_blank">mapping emergency calls logged by the San Francisco Fire Department</a>, and was also inspired by Noah Veltman's <a href="http://bl.ocks.org/veltman/3d1fb70e6993d4eb2eff7112c9e7bcf4" target="_blank">Voronoi relaxation</a>.

To do this, I kind of combined aspects of <a href="//en.wikipedia.org/wiki/Lloyd%27s_algorithm" target="_blank">Lloyd's algorithm</a> and <a href="https://en.wikipedia.org/wiki/K-means_clustering" target="_blank">k-means clustering</a>.

mit Licensed

Similar vizzes

Loading thumbnail…

Voronoi relaxation

A hundred random points relax into a stable Voronoi diagram using Lloyd’s algorithm, with each iteration fading the previous frame on a Canvas. The example runs entirely in the browser via D3 v4’s `d3.voronoi()` for polygon generation and `d3.polygonCentroid` to compute new point positions. The code animates convergence through `setTimeout` recursive calls, drawing point markers and polygon edges with the Canvas 2D API, and uses `getImageData()` to progressively darken old frames. Once points move less than one pixel, the visualization resets with a fresh random distribution.

TThanaporn-sk

80% match

Loading thumbnail…

Normalizing Clusters

A thousand points generated with d3.randomNormal are grouped into five clusters of nearly equal size, shown as colored lines radiating from each point to its centroid, with numeric labels displaying each cluster’s population. The animation cycles through Lloyd’s algorithm, recentering centroids and trading points between adjacent Voronoi cells—computed via d3.voronoi—until deviation stabilizes or reaches zero. Controls start and stop the iterative process, which runs asynchronously with d3.timeout and transitions.

Aalexmacy

76% match

Loading thumbnail…

Voronoi Tessellation

This interactive Voronoi diagram shows how a set of one hundred random points partitions a 960-by-500 SVG canvas into polygonal cells. Moving the mouse repositions the first site, causing the diagram to recompute dynamically with the red polygon, black links, and white site markers updating in real time. Built with D3 v4 and the d3-voronoi library, the example renders polygons as SVG paths, links as lines, and sites as circles, with all geometry recalculated on each mouse move.

Mmbostock

75% match

Loading thumbnail…

Voronoi binning (animated)

This animated visualization demonstrates Voronoi binning: 4,000 random points are generated, then sorted by size, with the top 10% selected as Voronoi sites. Initially, all dots appear white, but after a delay, the larger site points are colored, and then every other point is recolored according to the site of its Voronoi cell, found via the `diagram.find` method. The animation uses `d3.interval` to repeat the algorithm, `d3.voronoi` for the diagram, and D3 transitions to fade polygons and dots in and out, rendering in SVG.

AAjayyy

74% match

Loading thumbnail…

Voronoi

This example shows an interactive Voronoi diagram built with D3 v4, displaying 100 randomly generated points and their corresponding cells. Initially, the cells are hidden, but users can enable a hover effect that highlights the cell containing the mouse cursor, turning the hovered point red. A toggle also reveals all Voronoi polygons as thin gray outlines. The visualization uses `d3.voronoi()` to compute polygon boundaries from the points, and renders the result as SVG paths and circles within a menu-driven interface.

AAjayyy

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

73% match

Loading thumbnail…

Untitled

This animation demonstrates the k-means clustering algorithm in action, showing how a set of random points are iteratively grouped into clusters and how cluster centers move toward the mean of their assigned points. Users can click the SVG or press buttons to step through the algorithm, restart, or reset with new parameters. The visualization uses D3.js selections, transitions, and SVG elements like circles, lines, and cross-shaped paths to render the data. Interactive controls allow adjusting the number of points and clusters before initialization.

ZZhi Guangda

72% match

Loading thumbnail…

Voronoi Sorting

A Voronoi diagram of 500 randomly placed points continuously sorts its cells by area. Each polygon’s fill color encodes its area on a logarithmic scale, and cells slide horizontally into size order before the diagram recalculates from their new positions. The process repeats indefinitely, redrawing shapes and colors as areas change. Built with D3 v4, it uses `d3.voronoi` for tessellation, `d3.scaleLog` and `d3.scaleSequential` for mapping, and SVG `path` transitions with `d3.timeout` to loop the animation.

Aalexmacy

72% match