Brownian Motion Urquhart

Brownian Motion Constrained in Rectangle

A canvas displays 200 particles performing Brownian motion inside a rectangle, bouncing elastically off its boundaries. The simulation uses d3.forceSimulation with custom forces for random motion and container collision, plus d3.forceCollide to prevent overlaps. A Voronoi diagram, computed with d3.voronoi, generates an Urquhart graph—its edges are drawn as thick gray lines beneath thin black ones, with white-stroked yellow dots marking each particle. Clicking drags the first node, restarting the simulation.

86% match

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

79% match

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.

77% match

Brownian

This example uses D3 v7 to create an interactive SVG visualization that simulates Brownian motion and financial inflation/deflation dynamics. A large radial gradient circle follows the mouse cursor, while a separate process runs a Monte Carlo–style simulation using normally distributed random values to model changing notional values and reinvestment components. The visualization renders a dark backdrop with a white-bordered moving circle, updating in real time as the simulation runs. The code relies on D3's selection and join operations to manage dynamic SVG elements, with the simulation state logged to the console at each interval.

IItsTheSmallThings

75% match

Untitled

This example visualizes a dynamic, two-dimensional particle system where thousands of glowing points drift and collide within a bounded rectangular field. It shows the emergent patterns of clustering and dispersion as forces of attraction and repulsion act on the particles over time. The code uses `d3.forceSimulation` with custom force functions to manage particle velocities and positions, rendering each frame to an HTML5 Canvas. Particle trails are created by semi-transparent redraws, and the interaction of the forces produces a fluid, organic motion across the display.

Ssnowswirlin

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.

molecules

This visualization shows a field of 1,000 colorful circles that collide and bounce off each other, with a larger fixed circle at the center that can be dragged with the mouse. It uses d3.v3’s force layout and collision detection via d3.geom.quadtree to simulate physical interactions, while rendering the circles as SVG elements. The root node is fixed and follows the mouse pointer, and the force graph continuously updates the circle positions on each tick. The scene is interactive, allowing users to move the central node and watch the surrounding circles respond.

Yyyaaa1

Expand and fill force (work in progress)

Five hundred colored circles cluster in a cloud, then slowly diffuse outward as a force simulation seeks lower-density regions. The visualization uses custom forces within d3.forceSimulation, including a grid force and a hexbin-based expand force that samples random hexagon rotations and pushes nodes toward emptier neighboring bins. Rendered on Canvas, the circles respond to mouse movement, with the first node pinned to the cursor and the simulation restarting on interaction. The code employs d3.hexbin to compute density weights and d3.forceCollide to prevent overlaps.