Skip to main content
SimilarExport ZIP
100%

Delaunator Urquhart

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Jun 7, 2017
Created on May 18, 2017

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.

AI-generated description

Testing the new delaunator library by @mourner

We move points around at random, and compute the Urquhart graph of the result. Fun!

<!-- signature --> [<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>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/7f8cf2557039c4cad69bd8b1872723f1'>delaunator</a>

mit Licensed

Similar vizzes

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…

Urquhart Force Mesh

A force-directed simulation of 200 points, with the Urquhart graph—a subset of the Delaunay triangulation—drawn as gray links on a canvas. The code uses `d3.forceSimulation` for layout, `d3.voronoi` to compute the Delaunay diagram, and a custom `urquhart()` function to extract the graph by removing the longest edge of each triangle. Canvas 2D rendering shows the moving nodes as black dots. The first node follows the mouse, injecting a small `alpha` restart to keep the network shifting. The data is procedurally generated with `d3.range`.

PPhilippe Rivière
81% match
Loading thumbnail…

Urquhart graph

This visualization demonstrates the Urquhart graph, a subset of the Delaunay triangulation, applied to 2,000 randomly generated points. The graph edges are drawn in red over the Voronoi diagram’s gray polygon boundaries. The code uses `d3.voronoi` to compute the Voronoi cells, links, and triangles, then removes the longest edge from each triangle to derive the Urquhart graph. Sites are rendered as black-stroked circles, with SVG paths and lines for the polygons and edges.

PPhilippe Rivière
80% 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
76% match
Loading thumbnail…

Urquhart Force Mesh Dance Procrastination

Interacting with the mouse drags a single node, and a custom "dance" force chain pulls nearby points through the simulation. The Urquhart graph, derived from the Delaunay triangulation, is drawn on a Canvas as a network of lines over 200 force-directed points. Using d3.forceSimulation, d3.voronoi, and Canvas 2D context, the edges update each tick, showing the graph’s structure while the points jitter and rearrange. The code filters Delaunay links by removing the longest edge of each triangle to compute the Urquhart mesh.

PPhilippe Rivière
76% 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
76% 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
75% 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
75% match