Skip to main content
SimilarExport ZIP
100%

Circular Bounded Voronoi Tessellation

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Aug 17, 2016
Created on Aug 17, 2016

This example displays a Voronoi tessellation of one hundred randomly placed circular sites, with a colored convex hull that fully encloses the diagram and a single site that follows the mouse. The hull shape is derived from `d3.polygonHull` and then expanded outward along each vertex’s centroid radial angle using a distance calculated from the median of the Delaunay links, computed with `d3.median`. The code uses `d3.voronoi` with an extent, and renders the result as SVG paths, lines, and circles. The convex hull itself is drawn as a closed Catmull‑Rom curve via `d3.line().curve(d3.curveCatmullRomClosed)`, with additional artificial points added along the expanded hull boundary to ensure the tessellation stays within it.

AI-generated description

Bounded Voronoi Tesselation using the algorithm described in xlr8r.info

This is a variant of the <a href='http://bl.ocks.org/Fil/711834f9dc943d1de9c9577b10a7a872'>Bounded Voronoi Tessellation</a>, with:

  • circularly distributed sites

  • the median distance instead of the mean (allowing a small optimisation)

  • many more exterior control points

  • a d3.curveCatmullRomClosed convex hull shape

  • not displaying links and sites

 

Other (unfinished) variants:

Author: Philippe Rivière, August 2016

Based on <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4060366'>Voronoi Tessellation</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Bounded Voronoi Tessellation

This interactive visualization demonstrates a bounded Voronoi tessellation, where 100 randomly placed sites partition the SVG canvas into colored polygonal cells. The mouse controls the first site, dynamically updating the diagram as it moves. The code uses d3.voronoi to compute the tessellation and d3.polygonHull to create a convex hull around the sites, which is then expanded outward to bound the diagram. Artificial points are added along this expanded hull to ensure the Voronoi cells are fully enclosed, with the generator sites rendered as circles and the convex hull traced as a pink line.

PPhilippe Rivière
89% match
Loading thumbnail…

Alpha-Shape Bounded Voronoi Tessellation

An interactive Voronoi tessellation divides a plane into cells around 100 randomly placed sites, with the site distribution forming two distinct clusters near the left and right edges. The visualization highlights the two clusters’ boundaries using a computed alpha shape, whose convex hull is expanded and then filled with additional artificial sites to constrain the tessellation. Built with d3.v4, it uses `d3.voronoi`, `d3.polygonHull`, and `d3.curveCatmullRomClosed` to calculate and render the polygons and hull path in SVG.

PPhilippe Rivière
83% 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
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
79% 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
78% match
Loading thumbnail…

voronoi Play

A small set of six points defines a Voronoi tessellation, filling a 960 by 500 SVG canvas with colored polygons. Built with d3.v4, it uses `d3.voronoi().extent()` to compute polygon and link geometry from mapped coordinates. Hovering a polygon turns it grey, and on mouse-out it returns to its ordinal `schemeCategory10` color. The underlying seed points appear as fixed circles, while the computed edges are also drawn as lines.

RRobertDelgado
77% 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
77% 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
76% match