d3-force-attract: mouse attract II

100%

d3-force-attract: mouse attract II

✓ Published0🌍 Public

Last edited Jul 6, 2018

Created on Jun 24, 2018

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.

AI-generated description

Example illustrating the use of d3-force-attract with a dynamic attract target and a collision force.

forked from <a href='http://bl.ocks.org/ericsoco/'>ericsoco</a>'s block: <a href='http://bl.ocks.org/ericsoco/6e0573860e7f6655cee885d8b1b84065'>d3-force-attract II</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3-force-attract: mouse attract II

Fifty circles with randomized positions and radii are rendered as an SVG. The visualization demonstrates a multi-force physics simulation where a force-based layout continuously attracts the circles toward the current mouse location while a separate collision force keeps them from overlapping. The example uses `d3.forceSimulation()` and `d3.forceAttract()` from the d3-force-attract library, with per-node attract strength defined via the `inertia` property. A mouse-move event updates the attract target and restarts the simulation, updating circle positions on each tick.

FFrissAnalytics

94% match

Loading thumbnail…

d3-force-cluster and d3-force-attract

A network of colored circles groups into ten distinct clusters while a dynamic attract force pulls them toward the mouse position. The visualization uses `d3.forceSimulation` with custom `d3.forceAttract` and `d3.forceCluster` plugins to combine attraction and clustering forces, while `d3.forceCollide` applies collision avoidance. Nodes are rendered as SVG circles, and their radius and color encode cluster membership and size. The attract target updates on mouse movement, and collision strength ramps up over a three-second transition to create a smooth settling effect.

TThanaporn-sk

86% match

Loading thumbnail…

d3-force-cluster and d3-force-attract

Two hundred circles, shaded by cluster with a sequential rainbow scale, are positioned by a force simulation that combines `d3.forceAttract` to pull nodes toward the screen center and `d3.forceCluster` to group them into ten distinct clusters. The layout uses `d3.forceSimulation` with a custom `d3.forceCollide` whose strength ramps up over three seconds for a smooth transition. Each node is an SVG circle, rendered with `d3.drag` for interactive repositioning, while the tick handler updates the `cx`, `cy`, and `r` attributes. The data is generated randomly, with radii varying by cluster, and the example runs in the browser using D3 v4 and the `d3-force-attract` and `d3-force-cluster` plugins.

AAlainRo

83% match

Loading thumbnail…

Circles Repulsing from the Cursor

This example visualizes a force-directed layout of 200 circles that repel from the cursor. The circles, with random sizes and colors, continuously adjust their positions to avoid both the pointer and each other. The visualization uses d3.layout.force() for the physics simulation and d3.geom.quadtree() for efficient collision detection. Mouse movements update a root node’s coordinates, which exerts a strong repulsive charge on all other nodes, making them scatter as the cursor moves. The scene is rendered as SVG circles whose cx and cy attributes are updated on each tick of the force simulation.

SStoufa

81% match

Loading thumbnail…

Force Dragging II

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.

AAjayyy

80% match

Loading thumbnail…

d3-force-cluster and d3-force-attract

This example demonstrates a force-directed graph of 200 colored nodes organized into 10 clusters, using both `d3.forceAttract` to pull nodes toward the center and `d3.forceCluster` to group them by color. The simulation runs with `d3.forceSimulation`, while collision strength ramps up over three seconds for a smooth transition. Nodes are rendered as SVG circles with a rainbow sequential color scale, and dragging updates node positions via `d3.drag`. The data is generated randomly with cluster-specific radii and initial angular placement.

AAlainRo

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

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

76% match