Albers Tiles

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.

72% match

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.

72% match

Albers Equal-Area Conic

The visualization demonstrates the Albers equal-area conic projection, a standard map projection commonly used for the United States. It displays the country’s landmass, county boundaries, and state lines over a graticule grid, with a dark land fill contrasted against white administrative borders. The code uses d3.geo.albers with custom rotation, center, parallels, and scale parameters, and renders geographic features via d3.geo.path. TopoJSON data from a remote source is parsed with topojson.feature and topojson.mesh to draw the land and boundary layers, while d3.geo.graticule generates the grid.

70% match

Alaska Albers

This example displays Alaska using the EPSG:3338 Alaska Albers equal-area projection, rendered with SVG paths for land and county boundaries over a graticule grid. It filters Alaska state and county geometries from a TopoJSON file of U.S. data, styling land in dark gray and boundaries in white. The code uses `d3.geo.conicEqualArea` with specified rotation, center, and parallels, along with `d3.geo.path`, `d3.geo.graticule`, and `topojson.feature`/`topojson.mesh` to draw the shapes.

Albers USA

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.

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

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.

Vector Tiles

This example displays vector-tiled map data, rendering both road networks and building footprints over San Francisco. The visualization loads GeoJSON tiles from an external OpenStreetMap vector-datasource service and projects them using `d3.geo.mercator` and `d3.geo.path`. It employs the custom `d3.geo.tile` helper to compute visible tile coordinates at the current zoom level, then asynchronously fetches and draws each tile’s features as SVG paths. Road types are distinguished by stroke colors, while buildings appear as solid black polygons.