Polylabel with D3

100%

Polylabel with D3

✓ Published0🌍 Public

Last edited Oct 31, 2018

Created on Aug 22, 2016

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.

AI-generated description

Testing @mourner's polylabel with D3.

Orange dot = country centroid; white dot = polylabel of the projected polygon (or largest projected polygon in case of MultiPolygons).

See the variant: elliptic / scaled polylabel.

TODO :

retrieve the radius
solve clipping issues (antimeridian clipping + antarctica)

Built with blockbuilder.org, base map by @mbostock.

gpl-3.0 Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Polyconic

This visualization demonstrates the Polyconic map projection, a compromise projection that preserves distances along the central meridian and each parallel. It displays the world’s landmasses as solid black shapes with white country boundaries, overlaid on a graticule grid and an outlined sphere. The example uses the D3 v3 library with the `d3.geo.polyconic` projection plugin, `d3.geo.path` for rendering, and `topojson.v1` to process world-50m.json geographic data, drawing everything as SVG paths.

Mmbostock

78% match

Loading thumbnail…

polylabel.js

A choropleth of US states renders state boundaries in gray and places each state's two-letter abbreviation at the point most distant from its borders. Using `polylabel.js`, the map calculates the pole of inaccessibility for each state's projected coordinates, ensuring labels sit inside irregular shapes like Washington's islands. Built with D3 v4, the visualization projects geographic data via `d3.geoPath` and `d3.geoAlbersUsa`, animated on SVG paths and text elements.

LLuisSevillano

76% match

Loading thumbnail…

Let's make a map with D3.js!

This visualization displays world countries as light green polygons on a sky-blue sphere, using D3.js v5 and TopoJSON. It loads world-atlas data from unpkg and renders an SVG map with a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. The sphere outline is drawn first, followed by country features extracted from the TopoJSON topology using the topojson.feature API; each country path gets a thin black stroke with reduced opacity from the accompanying CSS.

Yyudhi115

74% match

Loading thumbnail…

Let's make a map with D3.js!

A choropleth-style world map displays countries as light green polygons on a blue sphere, with thin black borders, using D3.js v5 and TopoJSON. The example loads world-atlas geographic data from unpkg, converts TopoJSON to GeoJSON via the `feature` function, and renders the map with `d3.geoPath` and a Natural Earth projection (`geoNaturalEarth1`). The SVG canvas includes a background sphere path and country paths, demonstrating a minimal, clean approach to geographic visualization with accessible web libraries.

Aantonsold

74% match

Loading thumbnail…

World Map with D3.js!

This visualization displays a world map with countries rendered as pink shapes outlined in red against a blue spherical background. It uses d3-geoPath with an equirectangular projection to draw geographic features, and topojson's feature method to extract country polygons from the Natural Earth dataset loaded via world-atlas. The sphere background is created by passing a Sphere geometry object to the same path generator. Hovering highlights individual countries by changing their fill color.

DDINESH SAI BOPPANA

74% match

Loading thumbnail…

d3 World Map

This visualization displays a world map using an orthographic projection, with countries rendered as light green polygons that highlight orange on hover. The code loads geographic data from the world-atlas package via TopoJSON and joins it with country names from a TSV file. Using d3.geoPath and d3.geoOrthographic, it draws the globe’s sphere and country boundaries as SVG paths, with tooltips showing each nation’s name via appended title elements. The implementation relies on d3.v5, topojson-client, and a React-friendly structure with Promise.all for asynchronous data loading.

NNoah Weinberg

73% match

Loading thumbnail…

Let's make a map!

This map visualization displays countries as light green polygons with black outlines, set against a blue spherical background representing the globe. The example uses D3.js v5, specifically d3.geoPath and d3.geoNaturalEarth1 for the map projection, along with the TopoJSON library to convert geographic data into SVG paths. Country boundaries are rendered from the world-atlas countries-110m.json dataset, which is fetched and processed asynchronously. The visualization demonstrates a basic choropleth-free world map, focusing on geographical shape rendering rather than data encoding.

AAbhijeet Panda

73% match