Skip to main content
100%

Gooey Force Layout N-body Problem with Contours

✓ Published0🌍 Public
Aandrew-reid
Last edited Jan 12, 2018
Created on Nov 4, 2017

Five hundred unattached nodes drift in a perpetual N-body force simulation, their positions continuously recomputed by d3.forceSimulation with charge and center forces. As the nodes move, a d3.contourDensity estimate generates contour paths from their current coordinates, rendered as filled SVG paths via d3.geoPath. The contours are colored with a sequential YlGnBu scale, producing a gooey, fluid-like visualization of point density that updates on every tick.

AI-generated description

A combination of Mike Bostock's NBody Problem using a Force Layout, combined with one of his point density contours examples. Here's a quick canvas mock up - and here's a trippier one when you forget to clean the canvas each tick.

Using contours might allow for some sort of alternative gooey effect with nodes when splitting or merging nodes.

Similar vizzes

Loading thumbnail…

Gooey Force Layout N-body Problem - Canvas

This example shows a gooey, blob-like visualization of 400 nodes simulated with an N-body force layout, rendered on a Canvas element. The simulation uses `d3.forceSimulation` with a `forceManyBody` charge and no velocity decay, causing the nodes to move continuously. Each frame, `d3.contourDensity` computes density contours from the node positions, and `d3.geoPath` draws the filled and stroked contour shape, creating a smooth, merged form. The code uses D3 v4 and the d3-contour and d3-scale-chromatic libraries.

Aandrew-reid
89% match
Loading thumbnail…

Fun with d3 contours and force layouts

A force-directed simulation of 2,000 nodes drifts across a canvas while a contour density field, computed via `d3.contourDensity`, is redrawn each tick with `d3.geoPath`. The contour thresholds increase over time, causing the filled regions to shrink and eventually vanish as the simulation settles. The color cycles through a steelblue-to-orange scale using a linear interpolator, and the canvas context directly handles all rendering. The example demonstrates how dynamic thresholds and a decaying force layout produce a gradually drying-up visual effect.

Aandrew-reid
82% match
Loading thumbnail…

Gist 6f78386109f6234266f343adb7484c0a

This visualization displays a network of nodes connected by curved links, with each node positioned using a physics-based force layout. It uses `d3.forceSimulation` to compute node positions and `d3.line` with a curve generator to draw the links as smooth paths. The rendering occurs on an SVG canvas, where node colors and sizes reflect data values, and a tooltip appears on hover. The code loads external JSON data from a gist and dynamically updates the visualization based on the parsed dataset.

Aamazingandyyy
75% match
Loading thumbnail…

Force-Directed Layout with Convex Hull

This example uses D3 v4 to generate 100 random nodes assigned to 9 groups, then applies a force-directed simulation with `d3.forceSimulation`, including link, charge, X/Y, collide, and center forces over 120 ticks. After simulation, a Voronoi partition is computed via `d3.voronoi`, and its polygons are drawn as SVG paths that fill white and briefly turn red on mouseenter. Nodes are rendered as circles colored by category using `d3.schemeCategory20`, with no links generated, focusing purely on spatial clustering and interactive hull highlighting.

CChmits
74% match
Loading thumbnail…

D3 Force Simulation

A force-directed network of 100 nodes and 300 randomly generated links settles into a stable layout under a centering force, many-body repulsion, link distance constraints, and collision avoidance. The visualization uses D3 v4's `d3.forceSimulation` with `d3.forceCenter`, `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCollide` to animate the physics, while nodes are draggable via D3's drag interaction. The simulation updates an SVG canvas on each tick, redrawing lines and circles as positions change. The random data is generated programmatically, creating an abstract, interactive demonstration of force-based layout.

CCarlosACalvo
74% match
Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed layout positions 100 randomly generated nodes into 30 groups using a simulation from the d3.forceSimulation API, with forces for charge, collision, and x/y anchoring. The nodes are grouped by index modulo 30, and a Voronoi partition, created via d3.voronoi, draws convex hull-like polygons around each node’s cell in red on mouseover. The SVG output animates over 120 simulation ticks, filling each polygon white and outlining it in black, with node colors assigned from d3.schemeCategory20. The data is procedurally generated, not from an external source, and rendered entirely in the browser.

CCtuauden
74% match
Loading thumbnail…

Static Force Layout

This example displays a static force-directed graph of 100 nodes arranged in a circular pattern, with each node connected to the node three positions away. The visualization uses d3.forceSimulation to run a fixed number of layout iterations before rendering the final positions as SVG circles and lines. The code applies charge, link, x, and y forces, then simulates until the cooling schedule completes, showing the finished graph without any interactive updates.

Mmbostock
74% match
Loading thumbnail…

Gooey Effect

The visualization demonstrates a "gooey effect," where multiple circles emerge from a central stationary circle and then fall back into it, creating a fluid, blob-like appearance during their transition. The effect is achieved using an SVG filter with `feGaussianBlur`, `feColorMatrix`, and `feComposite` applied to a container group. D3.js v3 handles the rendering and animation, using a force layout (`d3.layout.force`) to manage the movement of the circles, while their positions are updated on each tick. The data consists of a single object with random velocity values, and all circles are initially placed at the center.

SSpaceActuary
74% match