Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Starter for 1.2

✓ Published0🌍 Public
RRuthvik Bairaboina
Last edited Nov 9, 2025
Created on Nov 9, 2025
Forked from React & D3 Starter

This choropleth map shows the percentage of electricity generated from renewable sources by U.S. state in 2024, using a D3.v7 geoAlbersUsa projection and d3.geoPath to render SVG state boundaries. Hovering over a state triggers a tooltip that displays the state name and its renewable percentage, with the data encoded in a hardcoded JavaScript object keyed by FIPS codes.

AI-generated description
MIT Licensed

Similar vizzes

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
84% 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
83% 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
83% 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
81% match
Loading thumbnail…

Fork of 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.

Ssandyman2109@gmail.com
80% 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
80% 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
79% match
Loading thumbnail…

Fork of USA Country Map

This choropleth displays the 50 U.S. states, each filled in green with white interior borders, and highlights states in orange on hover. It uses a geospatial projection via `geoAlbersUsaTerritories()` and renders the map with `d3.geoPath` on an SVG canvas. State boundaries come from the US Atlas TopoJSON dataset, which is loaded with `d3.json` and processed through TopoJSON’s `feature` and `mesh` functions. The React app manages data loading with `useState` and `useEffect` hooks.

YYerlan Yeszhanov
79% match