Skip to main content
SimilarExport ZIP
100%

Fork of React Starter

✓ Published0🌍 Public
Ssandyman2109@gmail.com
Last edited Nov 1, 2025
Created on Nov 1, 2025
Forked from React Starter

This choropleth map shows the number of universities per U.S. state, using an orange sequential color scale on an Albers projection via `d3.geoAlbersUsa`. The map renders SVG paths for states loaded from a TopoJSON source (`us-atlas`), converted to GeoJSON with the `topojson@3` library. State data is embedded in the page, and hovering displays a tooltip with the state name and university count, powered by D3 v7's selection and event handling. States without data appear gray.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

This choropleth map shows the number of universities per U.S. state, with darker orange shades representing higher counts and gray for states without data. It uses d3.json to load TopoJSON from the us-atlas package, converts it to GeoJSON via topojson.feature, and projects it with d3.geoPath and d3.geoAlbersUsa. A d3.scaleSequential with d3.interpolateOranges maps values to colors. Hovering over a state triggers a tooltip that displays the state name and its university count. The example uses embedded data but also includes a CSV variant.

Ssandyman2109@gmail.com
90% match
Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

This choropleth shows the number of universities per U.S. state, with darker orange shades indicating higher counts and gray for states without data. Hovering over a state reveals a tooltip with its name and university total. The visualization uses d3.geoPath with a geoAlbersUsa projection to render TopoJSON state boundaries from us-atlas, and d3.scaleSequential with an interpolateOranges color scheme to encode values. State data is provided via a hardcoded array in USA.html, while the separate usa.js version loads the same values from a CSV file.

Ssandyman2109@gmail.com
90% match
Loading thumbnail…

Fork of Fork of Fork of Blank Slate with Hot Reloading

This choropleth map visualizes the number of universities per U.S. state using a sequential orange color scale. The visualization loads US TopoJSON from us-atlas and a CSV dataset, joining state names to university counts. D3’s `geoAlbersUsa` projection and `d3.geoPath` render state boundaries, while a tooltip displays exact values on hover. Missing data states appear gray.

Kkmohithkumar7@gmail.com
89% match
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
85% 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
84% 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
84% 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
83% 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
83% match