Fork of usa map

100%

Fork of usa map

✓ Published0🌍 Public

Last edited May 6, 2024

Created on May 6, 2024

Forked from usa map

This map of the United States renders each state as an SVG path, colored by a categorical color scale based on the state name. The visualization uses the D3.js library's `geoPath` and `geoAlbersUsa` projection to convert TopoJSON state boundaries into map geometry. A hover effect turns the state black via CSS. The state boundaries are sourced from a remote JSON file containing US states data.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of USA map

This fork of the USA map displays state boundaries as SVG paths colored with a categorical scale. When hovering over a state, its fill color changes to red. Built with D3 v5, it uses `d3.geoAlbersUsa` for projection and `d3.geoPath` for rendering. State geometries come from the TopoJSON `us-atlas` dataset, processed via `topojson.feature`, with styling defined in CSS.

Mmukundakrishna.r@gmail.com

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

91% match

Loading thumbnail…

usa map

The map displays all U.S. states as colored SVG paths, with each state assigned a distinct color from a categorical scale and a hover effect that turns it black. It uses d3.geoPath with the geoAlbersUsa projection to render state boundaries from TopoJSON data loaded via the us-atlas and geo-albers-usa-territories libraries. State names appear as tooltips through appended title elements, and the color scale is d3.scaleOrdinal with schemeCategory10.

Ssatishnarne99@gmail.com

89% match

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

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

89% match

Loading thumbnail…

Fork of usa map

This example displays a map of US counties, colored with a categorical color scale and outlined in red. It renders an SVG using a TopoJSON file from the `us-atlas` package, projecting the features with a `geoAlbersUsa` projection. The code employs d3's `geoPath` to generate the map paths and `scaleOrdinal` for coloring each county by name. Hovering turns a county yellow, and the data source is a remote JSON file loaded via d3's `json` loader.

Rreddysushma994@gmail.com

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

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

89% match