Nikita's USA Country Map

100%

Nikita's USA Country Map

✓ Published4🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

This map of the United States displays all 50 states as a choropleth, with each state rendered as a filled path and colored blue, turning purple on hover. It uses the D3.js `geoPath` function with the `geoAlbersUsaTerritories` projection to draw the land boundaries and state interiors from the US Atlas TopoJSON dataset. The visualization is built in React, with the `useData` hook fetching the geographic data and `useEffect` triggering the TopoJSON transformation into geographic features and mesh lines. The SVG output is styled with CSS to emphasize state borders and provide interactive hover feedback.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

88% match

Loading thumbnail…

Fork of Nikita's USA Country Map

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.

Rradhadevarapu

88% match

Loading thumbnail…

Fork of Nikita's USA Country Map

Rradhadevarapu

88% match

Loading thumbnail…

NIKHIL ICE 8 USA Country Map

This visualization displays a map of the United States with state boundaries drawn in red and black. Using React with D3 v5, the code employs `geoAlbersUsaTerritories` for projection and `geoPath` to render SVG paths from TopoJSON data. State interiors are generated using the `topojson` library’s `mesh` function, while the land features come from the `feature` method. The map loads geographic data from an external GitHub Gist URL.

NNikhilMakkena

87% match

Loading thumbnail…

Country Map

This interactive map visualizes the fifty United States using a pink fill for each state and black borders, with a hover effect that changes the fill color to purple. Built with React and D3 v5, it renders geographic data as SVG paths using `d3.geoPath()` with the `geoAlbersUsaTerritories` projection. The code loads US state boundaries from a TopoJSON file via `us-atlas@3.0.0`, applying `feature()` and `mesh()` from TopoJSON to extract land polygons and interior borders.

TTejucmandava

87% match

Loading thumbnail…

Map

This map displays the 50 states of the USA, using a purple fill for each state with black borders and a hover effect that turns states pink. It renders geographic data with `d3.geoPath` and the `geoAlbersUsaTerritories` projection, processing TopoJSON from the `us-atlas` package. The visualization is built with React and D3 v5, using `useData` to fetch and transform the data, and renders as an SVG via the `Marks` component.

KKusumaKumariDama@my.unt.edu

87% match