Fork of React & D3 Starter

100%

Fork of React & D3 Starter

✓ Published0🌍 Public

Last edited Apr 12, 2026

Created on Apr 12, 2026

This choropleth map displays sample population data for U.S. states, with each state filled according to its value on a blue sequential color scale. The map is rendered as an SVG using D3.js v7, with state boundaries drawn via the `d3.geoPath` projection and TopoJSON data from the us-atlas package. Hovering over a state triggers a tooltip showing the state name and its associated data value, using D3's selection and styling methods.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example displays a choropleth map of U.S. states, using darker blue fills to indicate higher population values from a hardcoded dataset for fourteen states, with unlisted states shown in light gray. It loads TopoJSON from the us-atlas package, converts it to GeoJSON with `feature`, and renders paths via `d3.geoPath` and the `d3.geoAlbersUsa` projection. A linear color scale maps population extents to a blue range, and hover tooltips appear through SVG `title` elements. The map uses D3 v7 and TopoJSON-client, with an SVG rendering approach.

Ssaisanthoshravula@my.unt.edu

91% match

Loading thumbnail…

Fork of React & D3 Starter - practice

This example displays a base choropleth map of the United States, with each state filled in light blue and separated by white borders. Built with React and D3.js v7, it loads TopoJSON data from the us-atlas package and uses `d3.geoAlbersUsa()` for the map projection and `d3.geoPath()` to render the state shapes. The SVG output is generated within a React component, with the map drawn before any dataset has been linked.

Vvijaysaichigullapally1@gmail.com

91% match

Loading thumbnail…

Fork of React Starter

This React visualization displays a choropleth map of the United States, coloring each state by a numeric rate value from an embedded dataset. Users can click individual states to zoom in and out, with the map resetting when clicking the background. The implementation uses React to render the component, while D3.js handles the SVG generation, `d3.geoIdentity` and `d3.geoPath` for geographic projections, `d3.scaleQuantize` with `d3.schemeBlues` for color encoding, and `d3.zoom` for interactive panning and scaling. TopoJSON data is loaded from a local `map.json` file to define state boundaries.

SSimeon

89% match

Loading thumbnail…

Fork of React & D3 Starter- ICE_8_1.2(country)

This choropleth map shows estimated tourist visits per U.S. state for 2024, using a red color scale from light to dark red to indicate increasing visitor counts. The visualization renders a U.S. map with state boundaries defined by white strokes, using the `d3.geoAlbersUsa` projection and `d3.geoPath` to generate SVG paths. A hover tooltip displays state-specific data, while a legend and caption provide context. The map is built with D3.js v7, pulling TopoJSON geographic data via the topojson-client library, with a fixed sample dataset embedded in the code.

Vvijaysaichigullapally1@gmail.com

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

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

87% match

Loading thumbnail…

Fork of Country map

This choropleth displays all U.S. states as sky-blue filled polygons with teal borders marking state boundaries. Using the geo-albers-usa-territories projection via d3.geoPath, the map renders TopoJSON data from the us-atlas package. React manages the SVG output, while d3.geoGraticule and a mesh from topojson generate the underlying grid lines and interior state divisions.

Cchandrakalavanukuri

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

87% match