Skip to main content
SimilarExport ZIP
100%

Geo Albers with Territories Demo

✓ Published20🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Oct 28, 2020
Forked from Polished World Map

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.

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
94% match
Loading thumbnail…

Fork of Geo Albers with Territories Demo

This demo displays US state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers projection to include US territories. The visualization renders land areas in teal with state interior boundaries in a lighter stroke, using SVG paths generated by `d3.geoPath`. The data comes from US Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh` to extract state polygons and shared borders. Built with React for component structure, it loads the projection, D3 v5, and TopoJSON from CDNs, with a graticule defined but not explicitly rendered in the visible marks.

Vvietphan1041996
94% match
Loading thumbnail…

Fork of Geo Albers with Territories Demo

This demo shows U.S. state boundaries rendered with the geo-albers-usa-territories projection, which includes Alaska, Hawaii, and U.S. territories. The map displays land areas in teal with interior state borders drawn as lighter strokes on a gray background. The visualization loads TopoJSON data from the us-atlas package and converts it to GeoJSON using topojson.feature and topojson.mesh. React manages the component lifecycle, while d3.geoPath and d3.geoGraticule handle geographic path generation within an SVG canvas.

VVlad Belousov
93% match
Loading thumbnail…

Fork of Geo Albers with Territories Demo

This demo displays US state boundaries using the custom geoAlbersUsaTerritories projection, which extends the standard Albers USA projection to include US territories. The map renders as an SVG, with state interiors drawn as a mesh and land areas filled in teal. Data comes from the US Atlas TopoJSON file, processed with `feature` and `mesh` from topojson. The code leverages React hooks to load data asynchronously and d3’s `geoPath` and `geoGraticule` to generate the geographic paths.

DDeepa-Murugesan
93% match
Loading thumbnail…

Fork of Geo Albers with Territories Demo

This demo visualizes US state boundaries using a modified Albers projection that includes territories, rendered as SVG paths via React. It loads US Atlas TopoJSON data with `useData`, converts it to GeoJSON using `topojson.feature` and `topojson.mesh`, and draws land masses and interior borders with `d3.geoPath`. The map applies the `geoAlbersUsaTerritories` projection from the stamen library, with land filled in teal and interiors stroked in a lighter shade.

PPedro Medina
92% match
Loading thumbnail…

Fork of Geo Albers with Territories Demo

This demo displays US state boundaries using the geo-albers-usa-territories projection, which includes Alaska, Hawaii, and US territories, rendered as SVG paths. The visualization loads state topology from the US Atlas TopoJSON dataset, extracting land features and interior mesh boundaries via topojson feature and mesh functions. The React component structures the SVG output while d3.geoPath creates the projected path geometries, with the graticule helper generating the background grid lines shown in the styling.

Ffrozengem397
92% match
Loading thumbnail…

Fork of Geo Albers with Territories Demo

This demo displays U.S. state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers projection to include Alaska, Hawaii, and U.S. territories. The SVG rendering uses `d3.geoPath` with `geoPath(projection)` to draw land features and interior state borders, sourced from the US Atlas TopoJSON. React manages the component tree while `useData` loads the topology via `d3.json` and converts it with `topojson.feature` and `topojson.mesh`. The visualization shows land in teal with lighter interior strokes against a light gray background.

Zzeeeeem
92% 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
89% match