Skip to main content
100%

d3-force-cluster and d3-force-attract

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 26, 2017
Created on Mar 26, 2017

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.

AI-generated description

Example illustrating the use of both d3-force-cluster and d3-force-attract, with a dynamic attract target.

forked from <a href='http://bl.ocks.org/ericsoco/'>ericsoco</a>'s block: <a href='http://bl.ocks.org/ericsoco/11d5013dee991b219b205a4ecd558d7c'>d3-force-cluster + d3-force-attract II</a>

forked from <a href='http://bl.ocks.org/colombod/'>colombod</a>'s block: <a href='http://bl.ocks.org/colombod/5cc5f934e4db26a9345cc3dd6f3f87f3'>d3-force-cluster + d3-force-attract II</a>

mit Licensed

Similar vizzes