Canvas Voronoi

100%

Canvas Voronoi

✓ Published0🌍 Public

Last edited Sep 30, 2018

Created on Sep 30, 2018

This example visualizes a Voronoi diagram of 100 randomly generated points, with the cell containing the mouse position highlighted in red. As the cursor moves, that site and its cell update in real time. The diagram is rendered entirely to a Canvas 2D context using the d3-voronoi API, computing both cell polygons and Delaunay links. The code draws all cells with black strokes, site markers as small circles, and semi-transparent link lines, demonstrating how d3-voronoi outputs geometric data suitable for immediate canvas drawing.

AI-generated description

An interactive demonstration of d3-voronoi rendered to Canvas. Compare to SVG.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/6675193'>Canvas Voronoi</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Canvas Voronoi

One hundred randomly placed sites form a Voronoi diagram, rendered to a Canvas element. The cell containing the mouse position is filled red, while all cell boundaries and links between neighboring sites are stroked, and each site is drawn as a small circle. The first site follows the pointer via `d3.mouse` on touchmove or mousemove. The example uses `d3.voronoi` to compute cells, links, and polygons, with Canvas 2D context methods like `arc`, `moveTo`, and `lineTo` for drawing.

Mmbostock

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

84% match

Loading thumbnail…

Voronoi Circles

Voronoi Circles uses D3’s Voronoi tessellation to partition a canvas into regions around moving points, with each region filled by a colored circle that pulses and shifts in size. The animation, rendered with the Canvas API, computes the Voronoi diagram via `d3.voronoi` and updates the drawing each frame. The example demonstrates how Delaunay-based spatial subdivision can drive a simple, rhythmic visual effect.

Mmbostock

82% match

Loading thumbnail…

Toric Voronoi

This example demonstrates a Voronoi diagram on a torus, where 300 random points create cells that wrap seamlessly across the canvas edges. It shows how the cell structure repeats across a virtual cylinder in both horizontal and vertical dimensions, with the interactive site highlighted in red. The code uses d3.voronoi to compute the diagram, duplicating each site into eight shadow copies to handle the toroidal topology, then filtering links between shadow copies. Rendering is done via Canvas 2D context, with polygons, links, and sites drawn as separate paths.

PPhilippe Rivière

82% match

Loading thumbnail…

Voronoi Topology

One hundred particles drift and bounce across a canvas, their movements guided by random acceleration and velocity decay. A Voronoi diagram of their positions is computed, then converted into a TopoJSON topology using d3-voronoi and custom logic, allowing adjacent cells to be merged or meshed via topojson.merge and topojson.mesh. The canvas animation renders the resulting cell boundaries in gray and highlights alternating merged cells as semi-transparent red polygons, with particle positions drawn as red or black dots.

Mmbostock

81% match

Loading thumbnail…

Cylindrical Voronoi

The example displays a Voronoi diagram of 300 random sites mapped onto a cylindrical surface, with the left and right edges seamlessly connected. Two vertical lines mark the cylinder’s seam. The code constructs the effect by duplicating each site, shifting copies by the cylinder’s width, and filtering links that connect only shadow copies. It uses the d3-voronoi library with d3.v4 and renders cells, links, and sites on a Canvas 2D context. The first site follows the mouse, which wraps around the cylinder’s edges.

PPhilippe Rivière

80% match

Loading thumbnail…

Rotating Distance-limited Voronoi - d3v4 - canvas

The example shows a rotating set of distance-limited Voronoi cells rendered on a black canvas, where each cell’s maximum radius shrinks and expands over time. It updates the limit dynamically using a cosine function, redrawing the cells each frame via the `d3.distanceLimitedVoronoi` plugin and the Canvas 2D context. Points are generated from animated circles with varying radii and angular speeds, and the code uses `d3.timer` for the animation loop.

KKcnarf

80% match

Loading thumbnail…

Voronoi Tesselation

This example visualizes a Voronoi tessellation of 100 random points within an SVG canvas, with each cell filled by a random HSL color and vertices marked as small circles. Moving the mouse repositions the first vertex, dynamically recomputing the tessellation and updating only the paths whose geometry changed. The code uses the D3 library’s `voronoi` function from the `jit/voronoi.min.js` module, along with SVG path elements and `d3.svg.mouse` for mouse coordinates. The rendering is immediate, without animations or transitions.

Mmbostock

80% match