100%

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>

✓ Published0🌍 Public

Last edited Sep 10, 2012

Created on Jul 15, 2012

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.

AI-generated description

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>

copy of http://mbostock.github.com/d3/talk/20111018/collision.html

Similar vizzes

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

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

84% match

Loading thumbnail…

Interactive mouse

This example shows a force-directed layout of 200 colored circles, where one invisible fixed root node is dragged by the mouse, causing the surrounding circles to collide and repulse around it. As the mouse moves, the root node's position updates, and the simulation resumes, with a quadtree-based collision detection preventing overlaps between the circles. The visualization uses the D3 v3 force layout, `d3.geom.quadtree` for collision handling, and SVG circles, with colors assigned via `d3.scale.category10`.

Mmkt-ds

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

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

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

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

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

80% match