Skip to main content
100%

Elliptic / scaled Polylabel with D3

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Jul 29, 2019
Created on Aug 22, 2016

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 description

Testing @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.

gpl-3.0 Licensed

Similar vizzes