Alpha-Shape Bounded Voronoi Tessellation

100%

Alpha-Shape Bounded Voronoi Tessellation

✓ Published0🌍 Public

Last edited Aug 17, 2016

Created on Aug 17, 2016

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.

AI-generated description

not fully working

Bounded Voronoi Tesselation using the algorithm described in xlr8r.info and an alpha shape

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

sites distributed around two poles
poles are indentified with an alpha-shape (we then use the convex hull of each pole) - thanks to Jason Davies for the boundary() function (aka polygonBoundary)
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

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>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/aa92ffae75cc880f7880a3dd6da3ae18'>Circular Bounded 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

86% match

Loading thumbnail…

Circular Bounded Voronoi Tessellation

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.

PPhilippe Rivière

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

77% match

Loading thumbnail…

Alpha-Shapes

This example visualizes the alpha-shape boundary of a set of 2D points, highlighting the concave hull that encloses the data. It uses D3.js to compute a Delaunay triangulation via `d3.geom.delaunay`, filters triangles whose edges exceed a squared alpha threshold, and then traces the outer edges with a custom `boundary` function. The points are offset horizontally, and the resulting polygon is rendered in yellow SVG paths over a blue background, while the raw vertices remain hidden. The code relies on D3 v5 and an older D3 geometry module for triangulation.

EEdward-Elric233

76% match

Loading thumbnail…

Voronoi Labels in d3v4

This example uses a Voronoi tessellation to place labels in a scatterplot, showing how cell area and centroid direction determine which points get labeled and where. The code generates 200 random points, computes their Voronoi polygons with d3.voronoi, and filters for cells larger than 2000 square pixels. For each qualifying point, it compares the centroid to the point itself, choosing a label orientation among top, right, bottom, or left based on the angle. The visualization renders SVG paths for cell borders and centroid lines, with labels positioned via text anchors and offsets.

PPhilippe Rivière

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

74% match

Loading thumbnail…

Voronoi Labels

This visualization demonstrates a heuristic for labeling scatterplots using Voronoi tessellation. A set of 200 normally distributed points is rendered as small circles, with each point's Voronoi cell drawn as a gray polygon. A orange line connects each point to its cell’s centroid. The code only labels points whose cell area exceeds a threshold (2000), placing the index number at the point’s position. The label’s orientation—top, right, bottom, or left—is determined by the angle between the point and its cell’s centroid, computed using `Math.atan2`. Implemented with D3 v3, it uses `d3.geom.voronoi` with `clipExtent` and `d3.geom.polygon` to generate and analyze cells.

FFrissAnalytics

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

73% match