state map

100%

✓ Published0🌍 Public

Last edited Mar 30, 2022

Created on Mar 30, 2022

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.

AI-generated description

A demo of the geo-albers-usa-territories projection showing US State boundaries from US Atlas TopoJSON.

MIT Licensed

Similar vizzes

Loading thumbnail…

GeoAlbers with Territories

This example displays US state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers projection to include Alaska, Hawaii, and US territories. The map renders state outlines and interior borders as SVG paths, with land filled in teal and boundaries in a lighter contrasting stroke. The code loads US Atlas TopoJSON data and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. It builds the visualization with React components, `d3.geoPath` for projection and path generation, and `d3.geoGraticule` for the background graticules.

Ddanrhymes

92% match

Loading thumbnail…

country map

This example displays a map of the United States with state boundaries, rendered as SVG paths using D3’s `geoAlbers` projection and `geoPath`. It shows land areas in blue, a graticule sphere in purple, and state interiors highlighted with yellow strokes. The map loads US Atlas TopoJSON data from jsdelivr, processes it with `topojson.feature` and `topojson.mesh`, and is built within a React component using the `geoGraticule` API to draw the graticule lines.

PPavaniMangugari

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

91% match

Loading thumbnail…

US State Boundaries

This example displays a static map of US state boundaries rendered as SVG paths, using React for component structure and D3’s `geoPath` and `geoIdentity` projection to draw the geographic features. The data comes from the `us-atlas` TopoJSON file `states-albers-10m.json`, converted to GeoJSON via TopoJSON’s `feature` method. State shapes are filled with a gray tone and outlined in teal, creating a clean reference view of the country’s administrative subdivisions.

MMartin Blatz

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

90% match

Loading thumbnail…

USA Map

This example displays a choropleth-style map of the 50 US states using the `geoAlbersUsaTerritories` projection from the `geo-albers-usa-territories` library. The visualization renders geographic data from `us-atlas@3.0.0` TopoJSON via `d3.geoPath` within a React component, using `feature()` and `mesh()` from `topojson` to generate land and interior boundaries. States are filled with a yellow color and outlined in black, while hovering on a state highlights it in green, as defined in the accompanying CSS. The map is drawn as SVG at 960×600 resolution, with a loading state displayed until data is fetched.

Aaashrithd4

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

89% match

Loading thumbnail…

Geo Albers with Territories Demo

This demo renders a map of US state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers projection to include overseas territories. The visualization displays land areas in teal and state borders as thin strokes, with a graticule overlay available for geographic reference. The code loads TopoJSON data from the us-atlas package, converts it to GeoJSON using `topojson.feature` and `topojson.mesh`, then draws the paths with `d3.geoPath`. React manages the component state and rendering, while D3 handles data fetching and projection calculations.

CCurran Kelleher

89% match