Labeled US Map

100%

Labeled US Map

✓ Published2🌍 Public

Last edited Jul 23, 2020

Created on Jun 19, 2020

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`.

AI-generated description

A US map with labels (using an experimental Polylabel build) and an experimental map projection: Geo Albers USA with Territories.

This is really an experiment to see how VizHub can deal with moderate complexity.

Excerpted from Pleth.

MIT Licensed

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

95% match

Loading thumbnail…

state map

This example displays a map of US state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers USA projection to include US territories. The map renders state land areas in teal with lighter interior mesh lines separating adjacent states, drawn as SVG paths via `d3.geoPath`. React components manage the visualization, with `useData` fetching TopoJSON from the US Atlas repository and converting it to GeoJSON using `topojson.feature` and `topojson.mesh`. The code also defines a graticule with `d3.geoGraticule` for reference lines.

Bbhargavarathod

82% match

Loading thumbnail…

Country map

This example shows a map of the United States with its individual states rendered as sky-blue filled regions and their shared borders drawn as teal lines. It uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to convert TopoJSON data from the `us-atlas` package into SVG paths. The React component `Marks` maps over the land features and renders the interiors with a mesh, while a graticule is generated but not displayed. Data is loaded asynchronously via `d3.json` and processed with TopoJSON’s `feature` and `mesh` functions.

LLG0498

82% match

Loading thumbnail…

US Map

This example displays a map of the 50 US states, with each state filled in red and white borders separating them. The visualization uses the `geoAlbersUsaTerritories` projection and the `d3.geoPath` API to render geographic shapes as SVG paths. The map is generated from TopoJSON data loaded from a remote US atlas source, and it enhances interactivity by changing each state’s color to green when the pointer hovers over it.

Fferneyhoughedward@gmail.com

81% match

Loading thumbnail…

USA Map

This example displays a map of the United States, rendered as an SVG using a React component. It shows the nation’s land area in green, state boundaries as black lines, and an orange sphere background. The code employs D3’s `geoAlbers` projection and `geoPath` to draw geographic features, with `geoGraticule` available for reference lines. TopoJSON data from the `us-atlas` repository is loaded via `d3.json`, and the `feature` and `mesh` functions extract the landmass and state interiors.

Llikith1266

81% match

Loading thumbnail…

Country map

This example displays a map of the United States with state boundaries drawn as lines and land areas filled in a light tan color. It uses React hooks to load TopoJSON data from the us-atlas package and converts it into GeoJSON with the topojson feature and mesh functions. The map is rendered as SVG paths using d3.geoPath with the geoAlbersUsaTerritories projection, which includes U.S. territories. State interiors appear in teal strokes, while the graticule is defined but not rendered.

HHARSHA BUDDANA

81% match

Loading thumbnail…

Country map

This example displays a map of the United States with state boundaries rendered as SVG paths. Using D3’s `geoPath` and the `geoAlbersUsaTerritories` projection, it draws land areas in burlywood and state interior borders in teal. Geographic data comes from the `us-atlas` TopoJSON file, processed with `feature` and `mesh` from TopoJSON. The React component structure uses hooks (`useState`, `useEffect`) via `useData` to load and pass the map data to the `Marks` component.

SSaiSree0122

80% match

Loading thumbnail…

USA country map

This example displays a choropleth-style map of the 50 US states, rendered as navy SVG paths with black state borders. The map uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to draw geographic features from TopoJSON data loaded via `d3.json` from the us-atlas package. State shapes highlight in purple on hover, with React managing the component state and rendering the SVG output.

HHarshavardhan

80% match