molecules

100%

✓ Published0🌍 Public

Last edited Sep 26, 2019

Created on Sep 26, 2019

This visualization shows a field of 1,000 colorful circles that collide and bounce off each other, with a larger fixed circle at the center that can be dragged with the mouse. It uses d3.v3’s force layout and collision detection via d3.geom.quadtree to simulate physical interactions, while rendering the circles as SVG elements. The root node is fixed and follows the mouse pointer, and the force graph continuously updates the circle positions on each tick. The scene is interactive, allowing users to move the central node and watch the surrounding circles respond.

AI-generated description

The Viz created based on Collision Detection.

MIT Licensed

Similar vizzes

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

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

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

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

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

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

78% match

Loading thumbnail…

Untitled

A force-directed particle system in SVG uses D3 v3’s `d3.layout.force` to simulate 200 circles with random radii, while a fixed center node applies a strong negative charge to repel others. A quadtree (`d3.geom.quadtree`) accelerates collision detection, and the layout’s `on("tick")` event updates circle positions. Mouse movement drives the root node’s velocity via `d3.mouse`, resuming the simulation. The visualization runs in React, though the rendering logic is pure D3.

Bbasskur

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