Painting Euclidian Voronoi

100%

Painting Euclidian Voronoi

✓ Published0🌍 Public

Last edited Oct 15, 2016

Created on Oct 14, 2016

This example paints a Euclidean Voronoi diagram pixel by pixel onto a canvas, with each pixel colored according to its nearest site among 400 randomly placed points. A white overlay of the true Voronoi cell boundaries, computed with `d3.voronoi().polygons()`, is drawn after the painting finishes. The rendering uses an `O(n*x*y)` brute-force scan, computing squared Euclidean distances with `d3.scan()` and filling one vertical strip per pixel column. Site markers are drawn with colored strokes using Canvas 2D methods.

AI-generated description

By far the simplest of Voronoi algorithms is to paint pixels according to the color of their closest site. Such a shader will work with any definition of distance, weighted or not. Speed is awfully slow, in O(n*x*y). The results are pixels (canvas), not an abstract layout — we overlay it at the end.

See also <a href='http://bl.ocks.org/Fil/a7495ca3d5b322a6697530feb62fceef'>Painting Manhattan-distance Voronoi</a>.

mit Licensed

Similar vizzes

Loading thumbnail…

Painting power diagram (weighted Voronoi)

This example paints a weighted Voronoi diagram by coloring each pixel according to the closest of 400 randomly placed sites, using a custom distance function that adds a weight to squared Euclidean distance. The rendering is done directly on a Canvas 2D context, scanning pixel by pixel with `d3.scan` to find the nearest site and filling vertical strips for speed. Sites with a weight of 200 appear with red crosses, while unweighted ones are marked white. The code uses D3 v4’s `d3.interval` for incremental drawing and `d3.scaleOrdinal` with `schemeCategory20b` to assign colors.

PPhilippe Rivière

87% match

Loading thumbnail…

Painting Manhattan-distance Voronoi

This example paints a canvas pixel-by-pixel to show the Manhattan-distance Voronoi diagram of 400 random points. Each pixel receives the color of its nearest site, revealing diamond-shaped cell boundaries. The rendering iterates over every pixel sequentially using a `d3.interval`, computing the Manhattan distance via a custom function and selecting the closest site with `d3.scan`. The sites are drawn as white crosses on top of the colored cells, and the animation pauses after 30 seconds or when all pixels are processed.

PPhilippe Rivière

86% match

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

80% match

Loading thumbnail…

Canvas Voronoi

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.

FFrissAnalytics

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

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

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

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

75% match