Gist 6b64443aba2850cb55742070acbbd681

100%

Gist 6b64443aba2850cb55742070acbbd681

✓ Published0🌍 Public

Last edited Feb 2, 2018

Created on Feb 2, 2018

A choropleth-style map of U.S. states rendered with D3 v4, using the `d3.geoAlbersUsa` projection and `d3.geoPath` to draw each state's boundaries from the included `us-states.json` GeoJSON data. The SVG canvas is fixed at 700 by 580 pixels. No additional styling or interactivity is applied; the visualization simply displays the unadorned state outlines.

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 c74a36a544e6649522366453f5e1d6fa

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.

EEssohanamKouyou

90% match

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

88% match

Loading thumbnail…

Gist 877339b9886ef9a8b6db2fc0593bb61e

This example displays a map of the United States using the Albers USA projection, showing each state as a filled polygon. The code loads GeoJSON state boundary data from a local `us-states.json` file and renders it as SVG paths using `d3.geo.path()` with the projection. Built with D3 v3, the visualization sets a fixed canvas size and appends path elements to the SVG container for each feature in the dataset.

MMelanieSalignat

88% match

Loading thumbnail…

Gist 4f0c8fb5332c2deba6c05cc673c84000

This visualization displays the geographic boundaries of US states, rendered as SVG paths from a local `us-states.json` GeoJSON file. It uses `d3.geo.albersUsa()` to set an Albers equal-area conic projection, `d3.geo.path()` to generate the path data for each state feature, and appends the resulting paths to a fixed 700x580 SVG canvas. The code loads the data via `d3.json()` and iterates over the GeoJSON features to draw each state shape, though it only maps the coordinates without additional styling or interactivity.

SSamyMe

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

87% match

Loading thumbnail…

america

This example renders a choropleth-free map of the United States from GeoJSON state boundaries, using the Albers equal-area conic projection via `d3.geoAlbersUsa()` and tracing each state's outline with `d3.geoPath()`. The SVG canvas is populated by loading `us-states.json` and appending a `<path>` element per feature, whose coordinates are transformed by the projection. The code relies on D3 v4’s geo API and is forked from an existing block, with the data sourced from a gist.

SSebDelSab

86% match

Loading thumbnail…

Gist c7527476915607ec97df5ec292a38e8f

This example displays a static map of the United States using the Albers equal-area conic projection. The visualization renders all state boundaries as individual SVG paths, with Alaska and Hawaii included as multi-part polygons. The code loads geographic data from a local `us-states.json` file and uses the `d3.geo.albersUsa()` projection and `d3.geo.path()` API to convert GeoJSON coordinates into scalable vector graphics. Built with D3 version 3, the map fills the entire browser viewport.

RRomyRatolojanahary

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

84% match