Gist c74a36a544e6649522366453f5e1d6fa

100%

Gist c74a36a544e6649522366453f5e1d6fa

✓ Published0🌍 Public

Last edited Nov 30, 2017

Created on Nov 30, 2017

A choropleth-style map of the United States renders state boundaries as black outlines on a white background, using an Albers USA projection centered within a 700x580 SVG. The visualization loads geographic features from a local `us-states.json` file and draws each state path via D3 v4’s `d3.geoPath` with a `d3.geoAlbersUsa` projection. No data values or color encoding are applied, leaving the map purely as a geometric outline of the country’s administrative divisions.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/aurelient/'>aurelient</a>'s block: <a href='http://bl.ocks.org/aurelient/28e33c4fc0e1944df0ea72fe554b490c'></a>

forked from <a href='http://bl.ocks.org/aurelient/'>aurelient</a>'s block: <a href='http://bl.ocks.org/aurelient/5bb9210591eb86882612a2002faab698'></a>

mit Licensed

Similar vizzes

Loading thumbnail…

Gist a76504adb7799e4c28c6d1558bd35ce3

This example displays a map of the United States using an Albers USA projection, rendering state boundaries as SVG paths. It loads geographic data from a local `us-states.json` file containing a FeatureCollection of state polygons. The code uses d3.json to fetch the data and d3.geo.path with a d3.geo.albersUsa projection to convert GeoJSON coordinates into screen paths. The visualization presents a simple, static outline map without additional data encoding or interaction.

AAurelink

90% match

Loading thumbnail…

Gist 08d3bc545278d6a3b2d22df875392612

This example visualizes U.S. state boundaries using D3 v4’s geoAlbersUsa projection and d3.geoPath to render geographic features from a local us-states.json file. The SVG canvas, sized 700x580, is appended to the body, and each state’s polygon is drawn as a path element with a default fill and stroke. The map is centered using a translate of [width/2, height/2], and the simple code demonstrates how to load and project GeoJSON data for display. No interactions or styling are applied, keeping the focus on the map layout.

JJoymangulJensen

86% 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

85% 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

85% match

Loading thumbnail…

US State Map

This example displays a choropleth-style map of the United States, showing state boundaries as gray filled polygons with white strokes on a blank background. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to render the geographic shapes, while the TopoJSON `feature` API extracts state geometries from the `counties-10m.json` dataset hosted via jsdelivr. The map is drawn as SVG paths appended to a fixed 960×500 canvas, with styling applied through a CSS class.

AAkhila-Battula

85% match

Loading thumbnail…

USA Country Map

This choropleth-style map displays the contiguous United States rendered as an SVG, with each state filled in maroon and state boundaries drawn in black. The visualization uses a React component with the `geoAlbersUsaTerritories` projection and `d3.geoPath` to draw the geographic features. State boundaries are created using TopoJSON’s `mesh` function, while the underlying data comes from a remote TopoJSON file served via a GitHub gist. The map is static with no interaction or animation.

SSnigdha6698

84% match

Loading thumbnail…

USA in v3

This example displays a static map of the United States, using the AlbersUSA projection to render state boundaries as SVG paths. It shows the geographic shape of the country without additional data encoding. The visualization uses D3 v4’s `d3.json` to load GeoJSON state data, then `d3.geoPath` with a `d3.geoAlbersUsa` projection to generate the paths. The map is centered and scaled within an SVG canvas. The code relies solely on the loaded GeoJSON features and does not include interactivity or color encoding.

FFrieseWoudloper

84% match

Loading thumbnail…

Choropleth Map

A choropleth map of United States states renders geographic boundaries as SVG paths, colored light blue with black outlines and a red hover state. The map uses the topojson library to convert US Atlas TopoJSON data into GeoJSON features, then projects them with d3.geoAlbersUsa and renders them via d3.geoPath. Interactive zooming is enabled through a d3.zoom event that applies transform updates to the map group, while a categorical color legend displays the domain. State data loads from a remote US Atlas JSON file.

NNicholas Papacostas

84% match