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.
AI-generated descriptionTesting @mourner's polylabel with D3.
Orange dot = centroid ; white dot = normal polylabel; green dot = elliptic polylabel.
In this variant from <a href='http://bl.ocks.org/Fil/da021023d58b8ddefd165c65e37f796b'>Polylabel with D3</a> we set different scales for x and y, so as to find the "largest ellipse" to accomodate "horizontal" text labels (the ellipse ratio would match the text bbox ratio).
Built with blockbuilder.org, base map by @mbostock.