block by hugolpz 42955069888057aff8c2

Automatic Label Placement

Full Screen

By Navarro. See also: D3js: Automatic labels placement to avoid overlaps? (force repulsion)

This example is an extension of Mike Bostock’s tutorial Lets Make a Map that implements automatic label placement using the force layout and multiple foci. The centroid of each feature will define a foci of the force. This foci will attract the label that correspond to that feature (and ignore the others). The labels will repel themselves to avoid overlapping.