Skip to main content
SimilarExport ZIP
100%

Fork of USA Map

✓ Published0🌍 Public
Bbhargavarathod
Last edited Apr 4, 2022
Created on Apr 4, 2022
Forked from USA Map

This example displays a filled map of the United States with orange sphere background, green land areas, and black state borders. It uses React with D3 v5 to load US Atlas TopoJSON data and render SVG paths through `d3.geoPath` with an Albers projection. The code applies `d3.geoGraticule` for grid lines and `topojson.mesh` to draw interior boundaries between states.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of USA Country Map

This example displays a map of the fifty United States, rendered as pink states with white borders that highlight orange on hover. The visualization uses the `d3.geoPath` function with the `geoAlbersUsaTerritories` projection to draw the geographic data. State boundaries come from the `us-atlas` TopoJSON file, processed by the `topojson` `feature` and `mesh` functions, while React manages the SVG rendering and user interface.

AAndre J Denais
92% match
Loading thumbnail…

Fork of Country map

This example displays a map of the United States with its individual states filled in sky blue and state boundaries drawn in teal. It uses the `geoAlbersUsaTerritories` projection and `geoPath` from d3 to render geographic shapes as SVG paths, with data from the US Atlas TopoJSON. React manages the component state, loading the topology via `useData` and `topojson.feature` and `topojson.mesh` to extract land and interior boundaries.

SSaiSree0122
92% match
Loading thumbnail…

Fork of USA Country Map

This map of the United States renders the 50 states and their internal boundaries using a projected SVG path generated with d3.geoPath, based on a TopoJSON topology from the us-atlas dataset. A green fill colors each land area, while white strokes define state interiors for contrast; hovering over a state changes its fill to orange. The React component loads data via a custom hook that retrieves the TopoJSON file using d3.json and transforms it with TopoJSON’s feature and mesh functions.

Aaniosindustries
91% match
Loading thumbnail…

Fork of USA Country Map

This example displays a choropleth-style map of the 50 US states, rendered as an SVG where each state boundary is drawn using D3’s `geoPath` and a custom `geoAlbersUsaTerritories` projection. The map initially fills each state with a teal color, and hovering over a state highlights it in magenta. Data is loaded asynchronously from the US Atlas TopoJSON file (`states-10m.json`) using React hooks (`useState`, `useEffect`) and processed with TopoJSON’s `feature` and `mesh` functions to generate land and interior borders. The visualization is built with React 16 and D3 v5, with styling defined in an external CSS file.

Ttejaswikalluri05
91% match
Loading thumbnail…

Fork of USA Country Map

This choropleth displays the United States with individual states rendered as orange filled polygons, separated by black boundary lines. The map uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to draw state features and interior mesh from a TopoJSON file loaded with `d3.json` and processed via `topojson.feature` and `topojson.mesh`. React manages the SVG output, with state loaded asynchronously through a custom hook.

TTulluripallavi
91% match
Loading thumbnail…

Fork of USA Country Map

This fork of the USA Country Map displays the 50 states with a green fill and white borders, highlighting states in orange on hover. It uses the geo-albers-usa-territories projection with d3.geoPath to render geographic boundaries from the us-atlas TopoJSON dataset. React manages the component state, while D3 and TopoJSON handle data loading and conversion via the feature and mesh functions. The map is drawn as an SVG with the states-10m.json source.

SSelena Ding
91% match
Loading thumbnail…

Fork of Fork of USA Country Map

This choropleth map of the United States displays each state as a pink shape with white borders, enhancing interactivity by highlighting states in orange on hover. The visualization uses D3.js v5’s `geoAlbersUsaTerritories` projection and `geoPath` to render geographic boundaries, while React manages the component state. TopoJSON’s `feature` and `mesh` functions process the US Atlas state boundaries from a JSON file, and the SVG output is styled via CSS.

Mmoslem-tg
90% match
Loading thumbnail…

Fork of Fork of USA Country Map

This interactive map of the United States renders state boundaries as pink strokes over sky-blue landmasses, using an Albers USA projection that includes territories. The visualization builds on a React component that loads TopoJSON data via `d3.json` and converts it with `topojson.feature` and `topojson.mesh`. The `d3.geoPath` generator creates the SVG paths for both land areas and state interiors, with the `geoAlbersUsaTerritories` projection handling the geographic layout. The map displays state-level administrative boundaries with a clean, minimal aesthetic.

SSRI RAM REDDY KOTERU
90% match