History

There are tremendous resources for d3 visualization techniques. Here we focus on force layout with collision detection as an under explored medium.

bostock

This clustered force layout is implemented using two custom forces. The first, cluster, pushes nodes towards the largest node of the same color. A second collide force prevents circles from overlapping by detecting collisions. An exploration in three parts. blocks

cunningham

We developed this idea for drawing factory locations on a map where clustering of the factories physical locations made no traditional map scale or projection suitable. We approximated the effect of a wall map filled with push-pins by placing dots as close to the proper map location as possible without overlapping neighboring dots. blocks

We applied the same technique to visualize the progress of concurrent webserver transactions. Transaction progress will slow under load. Our dots slow proportionally and collide with more neighbors. The visual effect shows general contention without suggesting more meaning than that congestion and slowness can correlate. blocks