Voronoi binning (animated)

100%

Voronoi binning (animated)

✓ Published0🌍 Public

Last edited Jun 17, 2019

Created on Jun 17, 2019

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.

AI-generated description

Group data points around the largest points.

The recipe is as follows:

sort data points according to their sizes (here size = d[3])
use top 10% points as Voronoi sites
bin all data points according to their Voronoi cell, using <a href='http://bl.ocks.org/Fil/1b7ddbcd71454d685d1259781968aefc'>voronoi.find()</a>. The binning is rendered by using the Voronoi sites's color.

See also the <a href="//bl.ocks.org/Fil/7c3c41f1524dcf2caea54290cceddf0a">static version</a> — much less code to parse!

Original work by Philippe Rivière for d3-voronoi (issue 17).

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/959437d834f4a01eb4d1023cdd107554'>Voronoi binning (animated)</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Voronoi binning (animated)

Four thousand random points are colored by size, with the largest ten percent becoming Voronoi sites. The animation cycles through stages: it sorts points by size, uses the top ten percent as sites for d3.voronoi, then assigns every point the color of its site’s cell via the customized `diagram.find()` method. Points and cells fade, recolor, and reset every nine seconds using d3.interval and transitions.

PPhilippe Rivière

94% match

Loading thumbnail…

Voronoi binning

4000 random points are colored by the nearest of 400 weighted sites, selected as the top 10% by a random weight and arranged as a Voronoi diagram using d3.voronoi. A custom `find` method on the diagram, which walks neighboring cells via halfedges and optimizes from the last result, assigns each point the site color of its containing cell. Circles are rendered in SVG, with radius proportional to the square of each point’s weight.

PPhilippe Rivière

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

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

85% match

Loading thumbnail…

Rotating Voronoi in d3v4

A rotating Voronoi diagram animates dozens of moving points whose cells constantly morph, producing intricate curved patterns against a black background. The animation derives from points arranged on circular paths that rotate at varying speeds and radii, while the Voronoi tessellation updates each frame. The code uses d3.voronoi to compute the polygons and d3.line with the curveBasisClosed interpolator to render them. A custom resample function subdivides each polygon edge into three segments before drawing, creating the smooth, curved cell boundaries. The animation runs continuously via d3.timer, with points’ positions updated directly in response to elapsed time.

PPhilippe Rivière

83% match

Loading thumbnail…

Voronoi Edges

This example animates the edges of a Voronoi diagram generated from 1,500 normally distributed random points. The visualization uses d3.Delaunay and d3.voronoi to compute the diagram, then renders its line segments incrementally on a Canvas using a JavaScript generator and requestAnimationFrame. Each frame draws approximately five new edges with random colors from d3.hsl, creating a dynamic, colorful buildup of the geometric structure.

CCurran Kelleher

82% match

Loading thumbnail…

Voronoi Spirals

Randomly placed points generate Voronoi cells that gradually spiral inward, cycling through a Cubehelix color scale over a five-second animation. The d3-voronoi layout computes the initial polygons, then each frame the code shifts a vertex and interpolates a new point along each cell’s first edge, closing the path and filling it with a color based on elapsed time. Rendered on a Canvas via the d3.timer API, this creates a continuous, organic morphing effect.

Mmbostock

81% match

Loading thumbnail…

Rotating Voronoi

Rotating Voronoi shows a black-and-white field of curved cells generated from continuously moving points. Multiple rings of points orbit at different speeds and radii, causing the Voronoi diagram to shift and deform fluidly over time. The animation uses the D3 `d3.geom.voronoi` to compute the cells, clips them against a rectangular boundary, and subdivides each polygon edge into three equal segments before applying the `basis-closed` interpolation to create the smooth, organic curves. The SVG paths are re-rendered each frame with `d3.timer`.

Mmbostock

81% match