Delaunay Triangulation

100%

Delaunay Triangulation

✓ Published0🌍 Public

Last edited Jul 8, 2016

Created on Dec 19, 2012

This interactive demonstration shows a Delaunay triangulation of 100 randomly generated points, with triangles and links redrawn in real time as the user moves the mouse. The first point follows the cursor, highlighting all triangles and links connected to it in red and white. Built with d3.v4 and the d3-voronoi API, it uses SVG paths, lines, and circles to render the triangulation, updating the visualization dynamically on mousemove and touchmove events.

AI-generated description

An interactive demonstration of d3-voronoi, showing the Delaunay triangulation.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

delaunay-triangulation

This interactive visualization demonstrates the Delaunay triangulation of a set of points, rendered as an animated SVG using d3-voronoi. As users drag points, the triangulation updates in real time, with the SVG paths redrawn to show the current triangular mesh connecting each point to its nearest neighbors. The animation highlights the dynamic nature of the Delaunay triangulation as point positions change.

11wheel

88% match

Loading thumbnail…

Delaunay Circles

A field of randomly walking points forms a continuously updating Delaunay triangulation. Each triangle in the mesh contains an inscribed circle, with the circles rendered in a dark color against a light background. The animation runs on an HTML canvas, with the Voronoi and Delaunay calculations handled by the d3-voronoi library, while the points themselves are displaced using a simple random-walk algorithm. The code demonstrates the geometric relationship between the triangular mesh and the inscribed circles, which change as the points drift across the viewport.

Mmbostock

83% match

Loading thumbnail…

Delaunator

Delaunay triangulation is computed continuously over a set of moving points, with red points fixed at the start and blue points added via mouse movement. The canvas animates as points drift randomly, and the triangulation updates every tenth of a second. The visualization uses the Delaunator library for fast triangulation, with d3.v4 for scaling, intervals, and event handling, and Canvas API for drawing the filled triangles.

PPhilippe Rivière

83% match

Loading thumbnail…

Delaunay Circles II

A field of points connected by Delaunay triangles animates in a loop, with each triangle’s interior filled by a circle whose radius grows until it touches the triangle’s edges. The canvas redraws every frame, shifting point positions via a time-based function to continually recompute the triangular mesh and its inscribed circles. The visualization uses the `d3-voronoi` library for the Delaunay triangulation and draws directly to a 2D Canvas via JavaScript, with animation driven by a simple time step and no external data source.

Mmbostock

80% match

Loading thumbnail…

Delaunay Circles III

A set of circles animates continuously, with positions influenced by a Delaunay triangulation derived from a set of points. The rendering uses a Canvas element and the d3-voronoi library to compute the triangulation, while d3.forceSimulation likely drives the point movement. The visualization updates each frame, showing the evolving geometric relationships between the moving circles.

Mmbostock

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

79% match

Loading thumbnail…

Delaunay Force Mesh III

This visualization shows a force-directed mesh of points initially distributed via Poisson-disc sampling, with a Delaunay triangulation overlaid as connected gray lines. A fixed root node is pulled by mouse movement, while all nodes gravitate toward their original sample positions. The code uses `d3.layout.force` for the physics simulation, `d3.geom.voronoi` to compute the mesh links, and renders the result on a Canvas via the `getContext("2d")` API. Each tick redraws the links and nodes, with points styled as white-stroked black dots.

Mmbostock

78% match

Loading thumbnail…

Delaunay Force Mesh II

Two hundred force-directed points settle into a stable layout, with a Delaunay mesh overlaid and filtered to draw only links shorter than 100 pixels, revealing clusters and local connectivity. The simulation uses the `d3.layout.force` API, while the mesh is computed with `d3.geom.voronoi`; both render to a Canvas via `getContext("2d")`. One fixed node follows the mouse, pulling the network interactively, and the display updates continuously, drawing gray edges and white-ringed black points.

Mmbostock

76% match