Urquhart Force Mesh

100%

Urquhart Force Mesh

✓ Published0🌍 Public

Last edited Nov 17, 2016

Created on Oct 19, 2016

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`.

AI-generated description

Some force-directed points, with the Urquhart graph overlaid. Thanks @enjalot for the idea and time wasted :)

In another variant I toss in some Brownian motion.

Forked from <a href='http://bl.ocks.org/erlenstar/'>erlenstar</a>'s block: <a href='http://bl.ocks.org/erlenstar/0ba5ee8bd3773d70462523679d4ef5a4'>Delaunay Force Mesh II</a>

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

81% match

Loading thumbnail…

Brownian Motion Urquhart

This example shows 200 points moving under the influence of three forces: Brownian motion, collision avoidance, and elastic bouncing off a circular container. The resulting point distribution is visualized through an Urquhart graph, a simplification of the Delaunay triangulation that removes the longest edge of each triangle. The simulation uses D3’s `forceSimulation` module with custom force functions for `brownian`, `collide`, and `bounce-on-container` interactions. Rendering is done on a Canvas element, where the graph’s edges are drawn with thick light-gray strokes beneath thin black lines, and each node is a small yellow-filled circle. The mouse can also drag the first node, injecting new force into the system.

PPhilippe Rivière

79% match

Loading thumbnail…

Delaunay Force Mesh

This example displays a dynamic mesh of 400 nodes connected by links. The visualization shows a force-directed layout applied to the edges of a Voronoi diagram, where connected points repel and attract each other, causing the network to continuously reorganize. The scene is rendered on a Canvas element using the `d3.geom.voronoi` and `d3.layout.force` APIs from d3.v3. The force simulation ticks update the positions, redrawing the links and nodes with stroked paths and filled circles.

Mmbostock

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

77% match

Loading thumbnail…

Untitled

This visualization shows a dynamic force-directed layout of nodes and links, computed using D3’s `d3.forceSimulation`. The code renders the graph onto an HTML canvas, where each node’s position is updated each frame. It uses a predefined dataset with node labels and edge connections, and the simulation’s `tick` event redraws lines and circles based on current coordinates. The example highlights how D3’s force layout organizes connected data into a spatial network, with visual encoding limited to simple shapes and no interactive elements.

GGeorgeKoursaros

74% match