Painting power diagram (weighted Voronoi)

100%

Painting power diagram (weighted Voronoi)

✓ Published0🌍 Public

Last edited Oct 15, 2016

Created on Oct 15, 2016

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.

AI-generated description

Warning: unfinished & not verified!

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.

See also <a href='http://bl.ocks.org/Fil/f0fc1cf9afc96b591e3615563ece04cd'>Painting Euclidian Voronoi</a>.

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/a7495ca3d5b322a6697530feb62fceef'>Painting Manhattan-distance Voronoi</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Painting Euclidian Voronoi

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.

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

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

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

76% match

Loading thumbnail…

Voronoï playground: Voronoï map (study)

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.

KKcnarf

75% match

Loading thumbnail…

Voronoi colorized spanning tree

A Voronoi diagram of 1000 random sites is colored by a spanning tree that connects each site to its nearest neighbor closer to a moving root point. As the mouse moves, the root updates, the tree edges redraw, and every cell's fill derives from the tree's branch angles and depth. The example uses d3.v4 with `d3.voronoi` to compute cells and custom `diagram.find` and `diagram.next` methods for tree construction, then renders SVG polygons and lines with HSL colors.

PPhilippe Rivière

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

74% match

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

73% match