Skip to main content
SimilarExport ZIP
100%

Fork of React Starter

✓ Published0🌍 Public
SSimeon
Last edited Jul 27, 2021
Created on Jul 27, 2021
Forked from 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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React Starter

A choropleth map of world countries colors each nation by continent using a D3 geo path generator and a color scale. The visualization renders as an SVG globe inside a React component built with React hooks, fetching geographic data from the World Atlas TopoJSON and TSV files. Hovering reveals country names and indices appended as SVG title elements, while a transparent sphere outline frames the map. The code leverages d3.json, d3.tsv, and d3.geoPath to construct the projection and interactivity.

IIgor Bojković
86% match
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
85% 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
85% match
Loading thumbnail…

Fork of Fork of USA Country Map

This choropleth map of the United States displays each state as a pink shape with white borders, enhancing interactivity by highlighting states in orange on hover. The visualization uses D3.js v5’s `geoAlbersUsaTerritories` projection and `geoPath` to render geographic boundaries, while React manages the component state. TopoJSON’s `feature` and `mesh` functions process the US Atlas state boundaries from a JSON file, and the SVG output is styled via CSS.

Mmoslem-tg
85% 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
84% 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
84% 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
84% match
Loading thumbnail…

Fork of Country Map

A fork of a country map visualizes the 50 U.S. states using an SVG projection. It displays landmasses in pink with black state borders, and hovering over a state highlights it in purple. The code fetches geo-data from a TopoJSON URL and uses `d3.geoPath` with the `geoAlbersUsaTerritories` projection to draw features and interior mesh boundaries. React manages the component state and rendering, while D3 handles the data loading and geographic path generation.

TTejucmandava
84% match