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.