N-Body Problem

100%

N-Body Problem

✓ Published0🌍 Public

Last edited Feb 20, 2016

Created on Feb 20, 2016

Two hundred colored circles gravitate and collide, their motion traced by white velocity streaks, in an N-body simulation rendered on an HTML5 Canvas. The piece uses the D3 v3 APIs `d3.layout.force` for the force-directed layout, `d3.geom.quadtree` for efficient collision detection, and `d3.scale.linear` to map speed to a steelblue-to-brown stroke. Each tick pauses the simulation, redraws the scene, and resumes, with circle positions and velocities updated from prior frames.

AI-generated description

A recreation of an earlier Protovis example.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

N-Body Problem II

A swarm of 400 points orbits a central point in a dark canvas, with each point trailing a short line that encodes its instantaneous velocity as a color gradient from magenta to yellow. The simulation uses d3.forceSimulation with a d3.forceManyBody charge force and a d3.forceCenter constraint, while alphaDecay is set to zero so motion never settles. Rendering occurs on a Canvas 2D context, where each tick clears the frame and draws velocity-scaled strokes using d3.scaleLinear for color mapping.

Mmbostock

84% match

Loading thumbnail…

Collision Detection

A thousand circles of random radii are arranged into a tidy cluster, with d3.forceCollide preventing any overlap between them while d3.forceX and d3.forceY gently pull the whole group toward the center. The simulation runs on a fixed 960×960 canvas, where each tick clears the drawing and renders all circles as filled and stroked arcs. The code uses d3.forceSimulation with a velocity decay of 0.2, and draws the result directly via the Canvas 2D API.

Mmbostock

78% match

Loading thumbnail…

Untitled

A grid of circles occupies the canvas, each circle’s position and size derived from a force-directed layout. The visualization shows a network-like arrangement where nodes cluster and repel, creating organic spacing. Using `d3.forceSimulation` with `forceManyBody` and `forceCollide`, the code updates node positions on each tick, redrawing them via Canvas 2D API calls. A title bar is styled via CSS, and the entire scene resets when the page reloads, as noted in the README. The rendering relies on manual canvas drawing rather than SVG or WebGL.

Kkeitheade

77% match

Loading thumbnail…

Experiment �� <a href="http://bl.ocks.org/3116713" title="view this gist via bl.ocks.org">?</a> <a href="http://bl.ocks.org/GerHobbelt" title="view a list of all my gists at bl.ocks.org">8</a>

This visualization demonstrates collision detection among 200 colored circles in a bounded 1280×800 space, with a stationary root node that repels other nodes when the mouse moves. It uses D3’s force layout with gravity and a negative charge on the root, while a quadtree (`d3.geom.quadtree`) efficiently resolves pairwise overlaps during each tick. Circle positions update via SVG attributes, and the fixed root node follows mouse coordinates, resuming the simulation on mousemove events.

GGerHobbelt

77% match

Loading thumbnail…

Circles bouncing inside a rectangle

This example shows twenty colored circles bouncing and colliding within a rectangular boundary, with each circle moving at a constant speed and bouncing off the walls. The visualization adapts D3.js’s force layout to animate the circles, using custom gravity and collision functions to handle wall reflections and circle-to-circle collisions. The code relies on `d3.layout.force` for the simulation loop, `d3.geom.quadtree` for efficient collision detection, and SVG elements for rendering. Circle positions and velocities are manually updated in the tick function, while a static rectangle outlines the containment area, and the data consists of randomly generated circles with varied radii and colors.

663anp3ca

77% match

Loading thumbnail…

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.

PPhilippe Rivière

76% match

Loading thumbnail…

Test 2

This visualization shows a physics-based particle simulation where colored nodes move and collide within a bounded rectangular space. The code uses d3.forceSimulation with collision and forceX/forceY forces to drive the motion, rendering the particles on an HTML5 canvas via Canvas 2D context paths. Each node is assigned a random color and velocity, and the simulation updates continuously using requestAnimationFrame, drawing circles with varying radii as the forces stabilize the layout.

LLeonardonline

76% match

Loading thumbnail…

Collision Detection

This example demonstrates a collision-detection simulation using D3.js v4, displaying 1000 circles of varying sizes that repel each other while being pulled toward the center of a 960×960 canvas. The visualization uses `d3.forceSimulation` combined with `d3.forceCollide`, `d3.forceX`, and `d3.forceY` to compute particle positions, while rendering occurs via Canvas 2D API calls like `clearRect` and `context.arc`. The force-collision algorithm prevents overlaps by iterating collision checks twice per tick, and randomized radii from 4 to 18 pixels create the visual variety. All drawing is handled directly on the Canvas element rather than through SVG, producing a smooth real-time animation.

FFrissAnalytics

76% match