This example shows a force-directed cluster layout where 200 nodes are grouped into 10 distinct color-coded clusters, with circle size representing varying radii. The visualization initializes node positions using D3’s circle-packing layout (`d3.layout.pack`) before transitioning to a custom force layout (`d3.layout.force`) that applies clustering and collision avoidance. During the animated tick, the `cluster` function pulls nodes toward their cluster’s largest node, while the `collide` function uses a quadtree (`d3.geom.quadtree`) to prevent overlap, separating nodes by padding or cluster padding based on cluster membership. The SVG circles are rendered with smooth entrance transitions via `transition.attrTween`, which interpolates radius from zero to their final value.