Collision Detection

100%

Collision Detection

✓ Published0🌍 Public

Last edited Oct 31, 2017

Created on Oct 31, 2017

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.

AI-generated description

Mouseover to repel nodes. Adapted from my talk on force layouts. Compare to the canvas version.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3231298'>Collision Detection</a>

gpl-3.0 Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Collision Detection

This example demonstrates collision detection among 200 circles, where moving the mouse repels the nodes in real time. The visualization loads task data from a CSV file, though the circles themselves are generated with random radii using `d3.range`. It uses D3 v3’s `d3.layout.force` for physics simulation, a quadtree (`d3.geom.quadtree`) to efficiently detect overlaps, and SVG circles for rendering. The mouse position controls a root node, which pushes other circles away as the force layout updates on each tick.

JJdlv00

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

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

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

85% match

Loading thumbnail…

Untitled

A force-directed layout uses a d3.geom.quadtree for collision detection among 200 circles of varying radii, with a fixed root node at the center. The root’s position follows the mouse via an SVG mousemove event, causing the simulation to resume and repel other nodes. Circles are rendered as SVG elements with colors from d3.scale.category10, and d3.layout.force manages gravity and charge between nodes.

JJeet Jain

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

85% match

Loading thumbnail…

Untitled

This example shows a force-directed layout of 200 colored circles that repel each other and collide as they move. Dragging the mouse moves a fixed root node, pulling the surrounding circles toward the cursor. The visualization uses D3 v3’s `d3.layout.force` with custom gravity and charge functions, and a quadtree via `d3.geom.quadtree` to efficiently handle collision detection between circles. Each circle’s radius is randomly assigned, and its fill color comes from a categorical scale (`d3.scale.category10`). The rendering is done in SVG, with positions updated on each tick event.

Tthanhtrant219

84% match