Fork of USA Country Map

100%

Fork of USA Country Map

✓ Published0🌍 Public

Last edited Nov 25, 2022

Created on Nov 25, 2022

This choropleth displays the 50 U.S. states, each filled in green with white interior borders, and highlights states in orange on hover. It uses a geospatial projection via `geoAlbersUsaTerritories()` and renders the map with `d3.geoPath` on an SVG canvas. State boundaries come from the US Atlas TopoJSON dataset, which is loaded with `d3.json` and processed through TopoJSON’s `feature` and `mesh` functions. The React app manages data loading with `useState` and `useEffect` hooks.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of USA Country Map

This choropleth displays the 50 U.S. states on an SVG map, using a pink fill for each state and white borders to delineate the interiors. Built with React and D3 v5, it employs the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render the geographic features loaded from the `us-atlas` TopoJSON source. Hovering over a state changes its fill to orange.

Bbhanuprasadk19

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

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

94% match

Loading thumbnail…

Fork of USA Country Map

This fork of the USA Country Map displays the 50 states using an SVG-based geographic projection. It colors each state green and shows white interior borders, with a hover effect that changes the fill to orange. The visualization uses `d3.geoPath` with the `geoAlbersUsaTerritories` projection, and loads geographic data from the `us-atlas` TopoJSON source. React manages the rendering, while D3 and TopoJSON handle the geographic feature and mesh processing.

DDonald Bagwell

93% match

Loading thumbnail…

Fork of Fork of USA Country Map

This choropleth displays the 50 US states and their internal borders, rendered as an SVG using React components. The map turns green, with state boundaries shown as white lines, and individual states highlight in orange on hover. Geographic data comes from the `us-atlas` TopoJSON file, processed with `topojson.feature` and `topojson.mesh`. The visualization uses `d3.geoPath` with the `geoAlbersUsaTerritories` projection to draw each state path. Interactivity is achieved through CSS `:hover` styling on the `.land` class.

KKolliTeja

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

93% match

Loading thumbnail…

Fork of Fork of USA Country Map

This choropleth displays the fifty US states overlaid with white interior borders, using pink fill that shifts to a warm orange on hover. The map is rendered as an SVG using a React component that loads TopoJSON geographic data from the `us-atlas` package, projecting it with the `geoAlbersUsaTerritories()` function. The `d3.geoPath()` API converts the data into SVG paths, while `topojson.feature()` and `topojson.mesh()` extract boundaries and interior lines from the source topology.

Bbhanuteja1807@gmail.com

93% match

Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika

93% match