Albers USA

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 9, 2013

This example illustrates the Albers USA composite projection by dividing the map into four colored regions, each labeled with the conditional rule that determines which part of the United States it represents. It overlays a world map and graticule to show the geographic context. The visualization uses D3 v3 with `d3.geo.mercator`, `d3.geo.mercator`, `d3.geo.path`, and `d3.geo.graticule` to project and render SVG paths, while the division rectangles and lines are drawn manually to mark the Alaska, Hawaii, Puerto Rico, and lower-48 regions. World land data comes from a remote TopoJSON file.

AI-generated description

A visual explanation of how D3’s Albers USA composite projection divides the earth into four areas, similar to a <i>k</i>-d tree. This only applies to D3 versions prior to 3.1.8, which rewrote the Albers USA projection to use clipping, offering greater flexibility. (See Albers USA + PR for a related example that preserves Puerto Rico.)

gpl-3.0 Licensed

Similar vizzes

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

87% match

Loading thumbnail…

AlbersUSA + PR

This example presents a modified Albers USA map projection that includes Puerto Rico, rendered as an SVG using D3.js v3 and TopoJSON. The code defines a custom `albersUsaPr()` function, which composes four separate conic equal-area projections for the lower 48 states, Alaska, Hawaii, and Puerto Rico, each with its own translation and clipping. The map displays graticules and a sphere outline via `d3.geo.graticule()` and `d3.geo.path()`, and it loads US state boundaries from an external JSON file. Interactive mouse movement logs the projected coordinates using `projection.invert()`.

Mmbostock

87% match

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

87% match

Loading thumbnail…

AlbersUSA inverse proj parameters

This block demonstrates the inverse projection parameters of a modified AlbersUSA projection that includes Puerto Rico, answering a D3.js issue. It renders a U.S. map with red and green guide lines and rectangles marking the boundaries of each sub-projection’s clip extents within the composite projection’s coordinate space. The code uses `d3.geoAlbers`, `d3.geoConicEqualArea`, `d3.geoPath`, and `d3.geoGraticule` with SVG output. It overlays graticules, a sphere outline, and a red center point, while the map mesh comes from TopoJSON data.

PPhilippe Rivière

85% match

Loading thumbnail…

Untitled

This example displays a map of the United States, including Alaska, Hawaii, and Puerto Rico, using a custom composite projection defined in `albers-usa-pr.js`. The code builds on `d3.geoAlbers` and `d3.geoConicEqualArea` to create `d3.geoAlbersUsaPr`, which is then used with `d3.geoPath` to render state boundaries from TopoJSON data in `states.js`. SVG paths are generated for each state, filled gray with white strokes.

Iillus0r

85% match

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

83% match

Loading thumbnail…

US Map Projection

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.

EErik Erickson

82% match

Loading thumbnail…

Albers with Resampling

This example shows a world map in an Albers equal-area conic projection, with landmasses drawn in dark gray, country boundaries in white, and a graticule overlaid on a sphere outline. It uses d3.geo.conicEqualArea with a precision setting for resampled geometries, and d3.geo.path to render the projected features. Graticule lines are generated via d3.geo.graticule, while the land and boundary data come from a TopoJSON file fetched with d3.json, processed through topojson.feature and topojson.mesh. The SVG output uses class-based styling for strokes and fills.

Mmbostock

82% match