US_Map

100%

✓ Published0🌍 Public

Last edited Apr 2, 2022

Created on Apr 2, 2022

A choropleth-style map displays the contiguous United States with state boundaries, rendered in SVG using React. The visualization uses `d3.geoAlbers` for projection and `d3.geoPath` to draw geographic features, with `d3.geoGraticule` generating graticule lines. Land areas are filled pink, interiors stroked darkblue, and the sphere background is yellow, styled via CSS. Geographic data comes from the US Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`.

AI-generated description

A US map showing states boundaries from US Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Ssiddu7147

94% match

Loading thumbnail…

country map

This example displays a map of the United States with state boundaries, rendered as SVG paths using D3’s `geoAlbers` projection and `geoPath`. It shows land areas in blue, a graticule sphere in purple, and state interiors highlighted with yellow strokes. The map loads US Atlas TopoJSON data from jsdelivr, processes it with `topojson.feature` and `topojson.mesh`, and is built within a React component using the `geoGraticule` API to draw the graticule lines.

PPavaniMangugari

90% match

Loading thumbnail…

USA Country Map

This example displays a choropleth-style map of the United States, showing state boundaries and land areas in light green with black interior borders. It uses React to render an SVG, with D3's `geoPath` and the `geoAlbersUsaTerritories` projection from the `geo-albers-usa-territories` library. TopoJSON data is loaded from a remote URL, and the `feature` and `mesh` APIs extract land and interior boundaries for drawing. The visualization focuses on geographic shape rather than additional quantitative data.

KKiran3295

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

90% match

Loading thumbnail…

USA Map

This visualization shows a map of the United States with state boundaries, rendered as SVG using React components. The map displays land areas in tan, state borders in black, and a light blue sphere background. The code uses d3.geoAlbers for the projection, d3.geoPath to generate paths, and d3.geoGraticule for grid lines, though graticules are defined but not rendered. Data comes from the us-atlas TopoJSON file, processed with topojson.feature for the nation outline and topojson.mesh for state interiors.

Ttarungunda

90% match

Loading thumbnail…

country map

This visualization displays a choropleth map of the United States, coloring each state in red with thin black internal borders. The map is rendered using React and D3 v5, with geographic shapes generated through `d3.geoAlbers` projection and `d3.geoPath`. State boundaries come from the US Atlas TopoJSON dataset, processed via `topojson.feature` and `topojson.mesh`. The SVG paths change to sky blue on hover using CSS, providing simple interactivity.

SSai Kaushik

90% match

Loading thumbnail…

USA Map

This example displays a map of the United States, rendered as an SVG using a React component. It shows the nation’s land area in green, state boundaries as black lines, and an orange sphere background. The code employs D3’s `geoAlbers` projection and `geoPath` to draw geographic features, with `geoGraticule` available for reference lines. TopoJSON data from the `us-atlas` repository is loaded via `d3.json`, and the `feature` and `mesh` functions extract the landmass and state interiors.

Llikith1266

89% match

Loading thumbnail…

USA Country Map

This example displays a choropleth-style map of the 50 U.S. states, with each state filled in sky blue and separated by black borders. The visualization shows the geographic boundaries of the states, and hovering over a state highlights it in a warm orange color. The map is rendered as an SVG using React, with D3’s `d3.geoPath` and the `geoAlbersUsaTerritories` projection to convert TopoJSON data from the `us-atlas` package into drawable paths. The geometric data is loaded via `d3.json`, and state boundaries are computed using TopoJSON’s `feature` and `mesh` functions.

SSwapna1915

89% match