Skip to main content
SimilarExport ZIP
100%

US map Demo By Arefa Patwary

✓ Published0🌍 Public
AArefa Patwary
Last edited Apr 4, 2022
Created on Apr 4, 2022

This demo shows a map of the United States with gray state land areas and white state boundary lines, drawn using the geo-albers-usa-territories projection. The map loads US state topology from the US Atlas TopoJSON dataset via `d3.json` and converts it to GeoJSON features and meshes with `topojson.feature` and `topojson.mesh`. React renders the SVG paths generated by `d3.geoPath`, while the projection is applied through the geo-albers-usa-territories library. The visualization is built with d3.v5 and React, displaying static geographic shapes without interaction.

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…

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

US Map practice

This example shows a static map of US counties and state boundaries rendered in SVG, with each county path filled in grey and state interior borders drawn in a distinct teal color. The visualization uses D3 v5’s `geoPath` with a `geoIdentity` projection that applies `reflectY(true)` to flip the map vertically. React components load TopoJSON from the US Atlas package (`counties-albers-10m.json`), converting it to GeoJSON features via `feature` and `mesh` from TopoJSON, then fitting the projection to a 960×500 viewport with `fitExtent`. The map includes county polygons and state outline meshes, with styling defined in an external CSS file.

AAndre J Denais
83% 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
83% 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
83% match
Loading thumbnail…

US_Map

A choropleth-style map displays the contiguous United States with state boundaries, rendered in SVG using React. The visualization uses `d3.geoAlbers` for projection and `d3.geoPath` to draw geographic features, with `d3.geoGraticule` generating graticule lines. Land areas are filled pink, interiors stroked darkblue, and the sphere background is yellow, styled via CSS. Geographic data comes from the US Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`.

AAkrutiKhurana2103
83% 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
83% match