Urquhart graph

100%

Urquhart graph

✓ Published0🌍 Public

Last edited Sep 5, 2016

Created on Sep 5, 2016

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.

AI-generated description

<a href="https://en.wikipedia.org/wiki/Urquhart_graph">Urquhart graph</a>.

Original work by Philippe Rivière for d3-voronoi.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

geoVoronoi Delaunay links and Urquhart graph

One hundred random points on a sphere generate a geospatial Voronoi diagram, with Delaunay links drawn as white lines and the Urquhart graph subset emphasized in bold. The d3-geo-voronoi library computes the tessellation, while d3.geoPath and an orthographic projection render the polygons and links to SVG. Sites appear as open circles. The legend notes the graph distinction.

PPhilippe Rivière

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

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

80% match

Loading thumbnail…

Urquhart graph of container ports

This map displays the largest container ports worldwide on a Bertin projection, with their Urquhart graph computed by `d3.geoVoronoi` and rendered as red geodesics. It shows how the network connects ports without regard for continental boundaries, as the dataset contains only port coordinates. The visualization uses `d3.geoPath` to draw countries, Voronoi polygons, and links in an SVG, with hover interactions revealing port names via polygon opacity changes.

PPhilippe Rivière

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

70% match

Loading thumbnail…

Voronoi Edges

This example animates the edges of a Voronoi diagram generated from 1,500 normally distributed random points. The visualization uses d3.Delaunay and d3.voronoi to compute the diagram, then renders its line segments incrementally on a Canvas using a JavaScript generator and requestAnimationFrame. Each frame draws approximately five new edges with random colors from d3.hsl, creating a dynamic, colorful buildup of the geometric structure.

CCurran Kelleher

70% match

Loading thumbnail…

geoVoronoi triangles()

This example visualizes a spherical Voronoi triangulation of 100 random points, with each triangle filled by a random hue and the original sites marked as white dots. The orthographic projection rotates continuously to reveal the globe’s surface. Built with d3-geo-voronoi and d3-delaunay, it uses d3.geoPath and d3.geoOrthographic to render SVG paths, while d3.interval drives the animation by updating the projection’s rotation every 50 milliseconds. The points are generated as a GeoJSON FeatureCollection with coordinates spanning longitude 0–360 and latitude from -90 to 90.

PPhilippe Rivière

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

69% match