polylabel.js

100%

✓ Published0🌍 Public

Last edited Oct 25, 2016

Created on Oct 25, 2016

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.

AI-generated description

Easy example using polylabel.js by Vladimir Agafonkin: A fast algorithm for finding the pole of inaccessibility of a polygon.
Must read this post.

Similar vizzes

Loading thumbnail…

Labeled US Map

This example displays a labeled map of the United States, including territories, with state names positioned using polylabel for optimal label placement. The map uses a custom Albers USA projection with territories, rendering polygons on a Canvas layer and labels in an SVG layer. Built with React and D3 v5, it fetches state boundaries from TopoJSON, draws them with d3.geoPath, and caches geometry data asynchronously.

Jjblaskovich

77% 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

76% match

Loading thumbnail…

Gist c74a36a544e6649522366453f5e1d6fa

A choropleth-style map of the United States renders state boundaries as black outlines on a white background, using an Albers USA projection centered within a 700x580 SVG. The visualization loads geographic features from a local `us-states.json` file and draws each state path via D3 v4’s `d3.geoPath` with a `d3.geoAlbersUsa` projection. No data values or color encoding are applied, leaving the map purely as a geometric outline of the country’s administrative divisions.

EEssohanamKouyou

76% match

Loading thumbnail…

Labeled US Map

This example demonstrates a labeled map of the United States, including territories, rendered with React and D3 v5. Geographic features are drawn as polygons on a Canvas layer using `d3.geoPath`, while state names are positioned on top using an SVG layer and the `@datavis-tech/polylabel` algorithm for optimal label placement. The map uses an experimental `geoAlbersUsaTerritories` projection that extends the standard Albers USA projection to include Puerto Rico, Guam, and American Samoa, with state geometries loaded from TopoJSON via `topojson.feature`.

CCurran Kelleher

75% match

Loading thumbnail…

Gist 08d3bc545278d6a3b2d22df875392612

This example visualizes U.S. state boundaries using D3 v4’s geoAlbersUsa projection and d3.geoPath to render geographic features from a local us-states.json file. The SVG canvas, sized 700x580, is appended to the body, and each state’s polygon is drawn as a path element with a default fill and stroke. The map is centered using a translate of [width/2, height/2], and the simple code demonstrates how to load and project GeoJSON data for display. No interactions or styling are applied, keeping the focus on the map layout.

JJoymangulJensen

75% match

Loading thumbnail…

US State Map

This example displays a choropleth-style map of the United States, showing state boundaries as gray filled polygons with white strokes on a blank background. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to render the geographic shapes, while the TopoJSON `feature` API extracts state geometries from the `counties-10m.json` dataset hosted via jsdelivr. The map is drawn as SVG paths appended to a fixed 960×500 canvas, with styling applied through a CSS class.

AAkhila-Battula

75% match

Loading thumbnail…

Choropleth Map

A choropleth map of United States states renders geographic boundaries as SVG paths, colored light blue with black outlines and a red hover state. The map uses the topojson library to convert US Atlas TopoJSON data into GeoJSON features, then projects them with d3.geoAlbersUsa and renders them via d3.geoPath. Interactive zooming is enabled through a d3.zoom event that applies transform updates to the map group, while a categorical color legend displays the domain. State data loads from a remote US Atlas JSON file.

NNicholas Papacostas

75% match

Loading thumbnail…

ICE8-1.2

This example renders a choropleth-style map of U.S. states using a categorical color scale based on state names. It uses D3 v5’s `d3.geoAlbersUsa` projection and `d3.geoPath` to draw state boundaries from TopoJSON data loaded from the us-atlas CDN, with state labels positioned at each polygon’s centroid. The code also applies a sequential color palette via `d3.scaleOrdinal` and `d3.schemeCategory10`, and includes hover tooltips via appended `title` elements. The map is rendered as SVG, with black stroke outlines for each state.

Kkartik900

75% match