Skip to main content
SimilarExport ZIP
100%

US Map Projection

✓ Published0🌍 Public
EErik Erickson
Last edited Dec 12, 2023
Created on Dec 12, 2023
Forked from HTML Starter

This example displays a map of the United States using an Albers equal-area conic projection, with the landmass filled in light gray and state boundaries in white. It uses D3.js (d3.v7) with the `d3.geoAlbersUsa()` projection and the `d3.geoPath()` function to render the geographic shapes as SVG paths. The map is drawn within a fixed 960×600 viewport, and the underlying geographic data is handled by the TopoJSON library.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Albers Projection

This example displays a map of the United States using the Albers projection, with each state drawn as a filled gray polygon with white outlines. The visualization loads GeoJSON data from a remote `us.json` file via `d3.json`, which is then converted into SVG paths using `topojson.feature` and `d3.geo.path()`. The map is rendered as a single SVG path element within a 960×500 canvas, demonstrating a basic static choropleth without additional interactivity or styling layers.

Mmbostock
88% match
Loading thumbnail…

Albers Projection

This example displays a map of the United States using the Albers projection, a conic equal-area projection commonly used for national-scale choropleths. It renders the geographic boundaries as gray SVG paths with white strokes, loaded from a local `states.json` GeoJSON file. The code uses the D3 v3 library, specifically the `d3.geo.albers()` projection and `d3.geo.path()` to project and draw the feature collection.

Mmbostock
88% match
Loading thumbnail…

Centered US Map

This map of the United States uses an Albers equal-area projection to display state boundaries and the national border, overlaid on a sphere and graticule for context. The visualization is built with React and D3 v5, using `d3.geoAlbers`, `d3.geoPath`, and `d3.geoGraticule` to render the geographic features as SVG paths. State data originates from the US Atlas TopoJSON, with outlines colored distinctly from the land and sphere fill, and the map is generated from TopoJSON topology for state interiors.

AAbdul Salam Almadani
87% 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
87% 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
86% match
Loading thumbnail…

Centered US Map

This map of the United States uses a centered Albers projection, colored land and interior state boundaries against a graticule-filled sphere. The visualization is built with React, using D3's `geoAlbers`, `geoPath`, and `geoGraticule` functions to render the SVG paths. Topological data is loaded from the `us-atlas` package, and the `topojson` library's `feature` and `mesh` functions extract the nation and state-boundary geometries for display.

Yyuzhang21
86% match
Loading thumbnail…

Centered US Map

This map of the United States uses a centered Albers projection, colored land and interior state boundaries against a graticule-filled sphere. The visualization is built with React, using D3's `geoAlbers`, `geoPath`, and `geoGraticule` functions to render the SVG paths. Topological data is loaded from the `us-atlas` package, and the `topojson` library's `feature` and `mesh` functions extract the nation and state-boundary geometries for display.

Yyuzhang21
86% match
Loading thumbnail…

My USA Map

This example displays a map of the United States rendered with a light blue sphere background and dark landmasses, using the `geoAlbersUsa` projection and `d3.geoPath` to draw geographic features. It loads US topology data from `us-atlas@1` via `useData`, which fetches a JSON file and processes it with `topojson.feature` and `topojson.mesh` to extract land and interior boundaries. The React component renders SVG paths for the sphere, land polygons, and interior borders, with styling applied through CSS classes in a Poppins-font page.

Bbootshine2
86% match