100%

Automatic Label Placement

✓ Published0🌍 Public

Last edited Oct 4, 2016

Created on Oct 4, 2016

This example demonstrates automatic label placement on a choropleth map of the United Kingdom, building on Mike Bostock’s “Let’s Make a Map” tutorial. It shows how collision detection iteratively separates overlapping city name labels by adjusting their SVG transform translations until no overlaps remain. The map uses D3 v3 with `d3.geo.albers` projection, TopoJSON for geographic features, and SVG paths for subunit boundaries and place markers. Label positions are refined through a loop that compares `getBoundingClientRect` values and moves conflicting texts apart.

AI-generated description

Automatic Label Placement

This example is an extension of Mike Bostock’s tutorial Lets Make a Map that implements automatic label placement using collision detection. This is a proof of concept more than anything, not polished in any way.

References

Lets Make a Map

forked from <a href='http://bl.ocks.org/larskotthoff/'>larskotthoff</a>'s block: <a href='http://bl.ocks.org/larskotthoff/11406992'></a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3fc-label-layout map example

This example shows a labeled map of the United Kingdom, with city names positioned to avoid overlap and removed when they collide. It adapts Mike Bostock's map tutorial, using d3.geoPath and topojson to render the geography, while d3fc-label-layout's layoutLabel component, combined with layoutGreedy and layoutRemoveOverlaps strategies, places the SVG text labels. The code loads UK map data from a JSON TopoJSON file and uses the d3fc text label component for layout.

CColinEberhardt

82% match

Loading thumbnail…

Label Filtering Algorithm Prototype

This interactive prototype demonstrates a label placement algorithm for maps, rendering a world map with city labels sized by population and color-coded population density contours. The visualization uses D3.js for map projection with `geoNaturalEarth1`, data loading, and zoom interactions, while `rbush` implements spatial indexing to detect overlapping labels. City data comes from a reduced world cities CSV file, and geographical boundaries are drawn from TopoJSON world atlas data. The prototype filters cities by a population threshold and iteratively adjusts label positions to minimize collisions against the computed bounding boxes from SVG text elements.

CCurran Kelleher

74% match

Loading thumbnail…

// source http://jsbin.com/bobulik

This example displays a static Albers equal-area conic projection map of the United Kingdom, with its constituent subunits (England, Scotland, Wales, and Northern Ireland) filled in distinct colors. It renders the geographic boundaries and labels place names from the TopoJSON dataset. Using the d3.geoAlbers projection and d3.geoPath, the SVG paths are generated from the topojson feature collection. The code loads the UK map data via d3.json and applies CSS to hide Ireland.

MMTClass

72% match

Loading thumbnail…

Voronoi Labels

This example demonstrates a technique for labeling points on a map by positioning text labels in the empty spaces between them, using Voronoi diagrams. The visualization computes a Voronoi tessellation of the point locations and then places each label within its corresponding cell, avoiding overlaps. Built with D3.js, it uses `d3.Delaunay` for triangulation, `d3.Voronoi` for the diagram, and a force-directed layout algorithm (`d3.forceSimulation`) to refine label positions. The underlying data comes from a set of U.S. city coordinates, rendered as circles on a projected map.

Mmbostock

71% match

Loading thumbnail…

Untitled

This visualization displays a choropleth map of the United Kingdom using an Albers projection, with distinct colors for England, Scotland, Wales, and Northern Ireland, while hiding the Republic of Ireland. It renders subunit boundaries with dashed strokes and labels for each region, alongside place points and their labels. The code uses D3.js v3 with `d3.geo.albers`, `d3.geo.path`, and `topojson` to load and project geospatial data from a `uk.json` file, generating an SVG output within a React framework.

Vvenkatajayanth03

71% match

Loading thumbnail…

Fork of Label Filtering Algorithm Prototype

This visualization demonstrates a label placement algorithm for maps and scatter plots, showing city names positioned without overlapping. It projects world cities using a Natural Earth projection and renders population density as colored contours. The code uses D3 methods like `geoNaturalEarth1`, `contourDensity`, and `scaleSequential` for the map, while collision detection relies on the RBush spatial index. Labels are filtered by population threshold and hidden when their bounding boxes intersect, with data from the visionscarto-world-atlas and worldcitiesReduced datasets.

GGuo Ci

71% match

Loading thumbnail…

Elliptic / scaled Polylabel with D3

This example demonstrates three different approaches to finding label placement points within countries on a world map: the orange centroid, the white polylabel, and a green elliptic polylabel that accounts for different x and y scales to fit horizontal text. The visualization uses d3.geoRobinson for projection and d3.geoPath to render world map data from the visionscarto-world-atlas TopoJSON. It applies Mapbox’s polylabel algorithm twice on projected polygon coordinates—once normally and once with x-coordinates scaled by a factor of 4—to compute the largest ellipse-fitting point.

PPhilippe Rivière

70% match

Loading thumbnail…

Polylabel with D3

This visualization compares two methods for labeling countries on a world map: centroids and polylabels. Small orange dots mark each country’s spherical centroid, while white dots show the polylabel (the point farthest from any polygon edge) of its largest projected polygon, with green lines connecting the two. The map uses a Robinson projection and renders country shapes from TopoJSON data via d3.geoPath, while the polylabel algorithm from Mapbox computes the label positions on the projected coordinates.

PPhilippe Rivière

69% match