usmap

100%

✓ Published1🌍 Public

Last edited Mar 20, 2021

Created on Mar 19, 2021

This example displays a choropleth-style map of the United States, drawn as gray state boundaries on a dark background. It uses the geoAlbersUsa projection to render the states as SVG paths, with the geographic data loaded from the us-atlas TopoJSON file. The React component fetches the data via useData, converts TopoJSON to GeoJSON with the feature function from topojson, and passes it to Marks, which generates the paths using d3.geoPath.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Country map

This example shows a map of the United States with its individual states rendered as sky-blue filled regions and their shared borders drawn as teal lines. It uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to convert TopoJSON data from the `us-atlas` package into SVG paths. The React component `Marks` maps over the land features and renders the interiors with a mesh, while a graticule is generated but not displayed. Data is loaded asynchronously via `d3.json` and processed with TopoJSON’s `feature` and `mesh` functions.

LLG0498

89% match

Loading thumbnail…

United States of America Map

This example displays an interactive map of the United States derived from US Atlas topoJSON data. Using the `geoAlbersUsa` projection and `geoPath` API, it renders state boundaries as SVG paths with a tan fill over a blue ocean backdrop. React manages the component structure, while D3’s `json` method loads the topology and the topojson library converts it to GeoJSON. Hovering highlights states with a dark green color, showcasing basic spatial rendering with React and D3 integration.

Hhunsingeruk@gmail.com

89% match

Loading thumbnail…

state map

This example displays a map of US state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers USA projection to include US territories. The map renders state land areas in teal with lighter interior mesh lines separating adjacent states, drawn as SVG paths via `d3.geoPath`. React components manage the visualization, with `useData` fetching TopoJSON from the US Atlas repository and converting it to GeoJSON using `topojson.feature` and `topojson.mesh`. The code also defines a graticule with `d3.geoGraticule` for reference lines.

Bbhargavarathod

88% match

Loading thumbnail…

US_Map

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`.

AAkrutiKhurana2103

88% match

Loading thumbnail…

My USA Map

This example displays a map of the United States rendered with a light blue sphere background and dark landmasses, using the `geoAlbersUsa` projection and `d3.geoPath` to draw geographic features. It loads US topology data from `us-atlas@1` via `useData`, which fetches a JSON file and processes it with `topojson.feature` and `topojson.mesh` to extract land and interior boundaries. The React component renders SVG paths for the sphere, land polygons, and interior borders, with styling applied through CSS classes in a Poppins-font page.

Bbootshine2

88% match

Loading thumbnail…

map: usa, counties

This example renders a choropleth-style map of the United States, displaying county and state boundaries overlaid on landmasses, with graticules and a sphere outline. It uses a React component with `d3.geoAlbersUsa` for projection and `d3.geoPath` for drawing geometries. Data comes from the US Atlas TopoJSON (`us-atlas@3.0.0/counties-10m.json`), processed with `topojson.feature` and `topojson.mesh`. Interactive tooltips show county and state names on hover. The SVG output is styled with semi-transparent fills and distinctive boundary strokes.

Zzach b.

88% match

Loading thumbnail…

Country map

This example displays a map of the United States with state boundaries drawn as lines and land areas filled in a light tan color. It uses React hooks to load TopoJSON data from the us-atlas package and converts it into GeoJSON with the topojson feature and mesh functions. The map is rendered as SVG paths using d3.geoPath with the geoAlbersUsaTerritories projection, which includes U.S. territories. State interiors appear in teal strokes, while the graticule is defined but not rendered.

HHARSHA BUDDANA

87% match

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

87% match