Force Dragging II

100%

Force Dragging II

✓ Published0🌍 Public

Last edited Jun 29, 2018

Created on Jun 29, 2018

This example demonstrates draggable circles with collision detection, rendered on a Canvas using D3 v4. The simulation is driven by `d3.forceSimulation` with `d3.forceCollide`, updating 324 circles on each tick to redraw them via the canvas 2D context. Users can drag any circle, which sets fixed positions (`fx`, `fy`) during the interaction, while the physics engine resolves overlaps. The code uses `d3.drag` for pointer handling and relies on `simulation.find` to identify the circle under the cursor.

AI-generated description

This example demonstrates using d3.drag with d3.forceCollide to implement draggable circles with collision detection.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/2990a882e007f8384b04827617752738'>Force Dragging II</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Force Dragging II

A grid of 324 circles is rendered on a Canvas and can be dragged individually, with collision detection preventing overlap. The example combines `d3.forceSimulation` with the `d3.forceCollide` force and `d3.drag` interaction. During dragging, simulation `alphaTarget` increases to reheat the simulation, and fixed positions (`fx`, `fy`) track the pointer. The Canvas is cleared and redrawn on each tick, with circles drawn using the Canvas 2D API.

Mmbostock

92% match

Loading thumbnail…

Circle Dragging II

This example shows a canvas-based visualization where users can drag any of twenty randomly positioned circles. It uses the d3.drag module with a custom subject function for hit-testing, checking if the pointer falls within a circle’s radius. During a drag, the circle is reordered to the foreground, marked with a temporary stroke, and its position updates, triggering a redraw via render listeners. The implementation relies on D3 v4’s event handling, Canvas’s 2D context, and d3.scaleOrdinal with the schemeCategory20 palette for circle fill colors, producing smooth, interactive feedback.

Mmbostock

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

83% match

Loading thumbnail…

Circle Dragging III

This example demonstrates an improved technique for dragging circles rendered on a Canvas, using a custom drag subject that selects the circle closest to the pointer rather than simply the topmost overlapping circle. The code defines a linear scan in `dragsubject` to find the nearest circle within double the radius, increasing the effective hit area for easier interaction. Twenty randomly positioned circles are drawn and updated via d3-drag’s event handlers, with active circles highlighted by a stroke. The implementation relies on d3.drag, d3.scaleOrdinal with d3.schemeCategory20, and the Canvas 2D API.

Mmbostock

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

80% match

Loading thumbnail…

d3-force-attract: mouse attract II

This example shows fifty circles governed by a physics simulation that simultaneously attracts them toward the mouse cursor and repels them from one another. Using the `d3-force-attract` plugin, an attract force targets the pointer’s coordinates with per-node strength, while a collide force prevents overlap. The `d3.forceSimulation` API drives the layout, updating SVG circle positions on each tick, and the simulation restarts with easing on mouse movement.

AAjayyy

80% match

Loading thumbnail…

Drag circles

Five colored circles are positioned in a row on an 800×480 SVG canvas, each with a radius of 60 pixels. The example demonstrates a basic drag-and-drop interaction using D3.js v4, where users can move any circle freely by clicking and dragging it. The circles change cursor to a move icon on hover and gain a black outline while being dragged. The code uses `d3.drag()` with `dragstarted`, `dragged`, and `dragended` handlers, along with `d3.scaleOrdinal` and `d3.schemeCategory20` for coloring, and `d3.select(this).raise()` to bring the active circle to the front.

EEfratVil

78% match

Loading thumbnail…

Circle Dragging I

This example shows a set of colored circles scattered across an SVG canvas, which users can drag with the mouse. Each circle’s position is stored as x and y properties in its data object, and those values update live during the drag. The code uses d3.select and d3.drag from the d3-drag module to handle the interaction, attaching event handlers for start, drag, and end. At drag start, the circle is raised to the foreground with `.raise()` and gets a black stroke via the `.active` class; the stroke is removed on release. The circles are rendered as SVG `<circle>` elements, colored with a categorical scheme from `d3.scaleOrdinal` and `d3.schemeCategory20`, with random initial positions computed from the SVG’s dimensions.

Mmbostock

78% match