Delaunator

100%

✓ Published0🌍 Public

Last edited Jun 7, 2017

Created on May 18, 2017

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.

AI-generated description

Testing the new delaunator library by @mourner

The red-ish points are set at the beginning, and the mouse movements drop blue-ish points. All points move randomly, and every umpth of a second a Delaunay triangulation of the points is recomputed.

[<img src="https://avatars1.githubusercontent.com/u/7001?s=20" />](https://github.com/Fil/) <em>Questions and comments welcome on [gitter.im/d3](https://gitter.im/d3/d3), [twitter](https://twitter.com/@recifs) or [slack](https://d3js.slack.com).</em> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-58621-8', 'auto'); ga('send', 'pageview'); </script>

mit Licensed

Similar vizzes

Loading thumbnail…

Delaunator Urquhart

This example animates a set of 2,000 randomly moving points, rendering the Urquhart graph, a simplified proximity graph derived from the Delaunay triangulation. The animation runs in real-time, with points wandering randomly across a canvas and new points added on mouse movement, while performance is tracked and displayed as frames-per-second metrics. The visualization uses the `delaunator` library for triangulation, with the Urquhart algorithm implemented by removing the longest edge of each triangle. The rendering is done via Canvas 2D graphics, with a `d3.interval` timer driving the animation and `d3.scaleLinear` for color mapping, all orchestrated through the D3 v4 API.

PPhilippe Rivière

83% match

Loading thumbnail…

Delaunay Triangulation

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.

Mmbostock

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

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

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

81% match

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

80% match

Loading thumbnail…

delaunay.findAll()

This example demonstrates a custom `findAll` method for `d3.Delaunay` that searches for all points within a given radius of a target location. Using 200 points sampled from normal distributions, the visualization animates a growing circle from the center of the canvas, dynamically highlighting points within the expanding radius in orange while leaving others green. The animation, rendered as SVG with d3 transitions, showcases an efficient breadth-first search over the Delaunay triangulation to identify nearby sites.

PPhilippe Rivière

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

73% match