Fork of Nikita's USA Country Map

100%

Fork of Nikita's USA Country Map

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

This fork of Nikita's USA Country Map displays the geographic boundaries of all 50 US states and their interiors using an SVG rendering with a blue fill and black state borders. The map uses the `geoAlbersUsaTerritories()` projection and `d3.geoPath()` to draw geographic features from TopoJSON data loaded from `us-atlas@3.0.0`. Built with React and D3 v5, it fetches the dataset via `d3.json`, processes it with `feature()` and `mesh()` from TopoJSON, and responds to user interaction by changing a state's fill to purple on hover.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Nikita's USA Country Map

Rradhadevarapu

100% match

Loading thumbnail…

Fork of Fork of Nikita's USA Country Map

This visualization displays a choropleth map of the 50 U.S. states, with each state filled in blue and state boundaries drawn as black interior lines. The map uses a geo-albers-usa-territories projection via `geoAlbersUsaTerritories()` and renders geographic shapes with `d3.geoPath()`. Data is loaded from the `us-atlas` TopoJSON file and processed using the `feature()` and `mesh()` functions from TopoJSON. The React-based implementation uses hooks (`useState`, `useEffect`) to manage data fetching, and SVG paths are generated for each state feature. Hovering over any state highlights it in purple through CSS.

GGalineeharika

94% match

Loading thumbnail…

Fork of Fork of Nikita's USA Country Map

This example displays a choropleth-style map of the 50 U.S. states, with each state filled in blue and bordered by black interior lines. Built with React and D3 v5, it uses the `geoAlbersUsaTerritories` projection and `d3.geoPath()` to render geographic shapes from a TopoJSON file. The map highlights states on hover by changing their fill color to purple. The data is loaded asynchronously via `json()` and processed with TopoJSON’s `feature` and `mesh` functions.

IIndhuKrishnaraj

93% match

Loading thumbnail…

Fork of Fork of Nikita's USA Country Map

This example displays a choropleth-style map of the United States, showing all 50 states filled in blue with black state borders. The visualization uses React with D3 v5’s `geoPath` and the `geoAlbersUsaTerritories` projection to render geographic features from TopoJSON data sourced from a VizHub URL. State boundaries are drawn using TopoJSON’s `mesh` function. Hovering over any state highlights it in purple via CSS `:hover` styling, while the SVG is rendered at 900×700 pixels.

GGogineni44

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

92% match

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

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

90% match