Collision Detection

100%

Collision Detection

✓ Published0🌍 Public

Last edited Mar 30, 2017

Created on Mar 30, 2017

D3’s forceSimulation engine drives 1,000 nodes of randomized radius on a Canvas, with forces for x, y, and collision keeping them centered. Every two seconds, the collision radius is increased via d3.forceCollide’s radius function, prompting the simulation to restart and reinitialize, visibly enlarging all nodes while they re-separate under the updated constraints. The scene is drawn per tick by clearing the canvas, translating to the center, and stroking filled arcs for each node.

AI-generated description

Test if d3.forceCollide can reinitialize after updating the node radii

forked from <a href='http://bl.ocks.org/steveharoz/'>steveharoz</a>'s block: <a href='http://bl.ocks.org/steveharoz/3fc45e398b8bd7a17460698e79c19d03'>Collision Detection</a>

gpl-3.0 Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

Collision Detection (Canvas)

This example demonstrates a force-directed layout with collision detection among 200 nodes. A fixed root node acts as a repulsive force, while the user can move it by mousing over the canvas, causing nearby nodes to repel away. The visualization uses the d3.layout.force simulation library, with a d3.geom.quadtree for efficient spatial collision checks. Rendering is done on an HTML5 Canvas via the getContext("2d") API, drawing all nodes as steelblue circles on each tick. The code is adapted from a talk on force layouts, showing real-time interaction and physics-based movement.

Mmbostock

83% match

Loading thumbnail…

Collision Detection in a tight square

A thousand colored circles of varying radii bounce and slide within a square boundary, colliding and repelling to avoid overlap. The simulation uses d3.forceSimulation with a custom force function that pushes nodes away from the square’s edges, while d3.forceCollide handles circle-to-circle collisions. The Canvas API renders each circle with a distinct fill from the d3.schemeCategory10 palette, and the white strokes emphasize boundaries during the continuous tick updates.

PPhilippe Rivière

83% match

Loading thumbnail…

Collision Detection

A force-directed layout places 200 circles on an SVG canvas, with a fixed invisible root node at the center of a charge-based repulsion field. Mouse movement repositions this root, causing the surrounding circles to scatter and collide. Using the d3.layout.force simulation, a quadtree indexes nodes for efficient pairwise collision resolution, adjusting circle positions on each tick. The circles, whose radii vary randomly, are colored via d3.scale.category10 and loaded from an external CSV file, while the root’s position tracks the cursor to repel the swarm.

JJdlv00

82% match

Loading thumbnail…

Collision Detection

This example demonstrates a collision detection simulation where 200 nodes bounce off one another while a fixed root node is repelled by the mouse. The visualization uses D3 v3 with an SVG canvas, rendering circles with a color scale. The simulation relies on `d3.layout.force` for the force-directed layout, `d3.geom.quadtree` for spatial indexing, and the `force.on("tick")` event to update node positions. The mouse interaction uses `svg.on("mousemove")` to reposition the root node and resume the simulation.

JJdlv00

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

78% match

Loading thumbnail…

Collision Detection

Interactive collision detection shows 200 colored circles moving inside a rectangular SVG viewport. Moving the mouse repels the circles, pushing them apart and causing them to collide and bounce off one another. The visualization uses D3 v3’s force layout and quadtree-based collision handling via `d3.layout.force` and `d3.geom.quadtree`, with mouse movement updating a fixed root node to drive repulsion. Rendering is done with SVG circle elements, and the force simulation updates their positions on each tick.

Mmbostock

77% match