Fork of React Starter

100%

Fork of React Starter

✓ Published0🌍 Public

Last edited May 31, 2022

Created on May 31, 2022

A choropleth map of U.S. county unemployment rates colors each county with a blue sequential scale, using a quantize scale with nine bins from 1% to 10%. The visualization loads unemployment data from a CSV file and county and state boundaries from a TopoJSON file. The React app renders an SVG via D3’s `geoPath` projection, with state borders stroked in white and hover tooltips showing county names, state names, and exact rates.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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 Jos

This visualization shows a choropleth map of US state unemployment rates from January 2020 to December 2022. A dropdown menu lets users select a specific month and year to update the map’s color encoding. The map uses a threshold color scale with dark brown for higher unemployment. Hovering over a state triggers a tooltip with details. The visualization is built with React and D3.js, using d3.geoPath to render the map from TopoJSON data and d3.csv to load the unemployment data.

Jjoslyn54

81% match

Loading thumbnail…

Hello React!

This example visualizes a choropleth map of the United States, displaying state-level unemployment rates with a green color scale derived from a TSV data file. Built with React and D3 v5, it renders state boundaries and graticules using `d3.geoPath` with an Albers projection, pulling TopoJSON data from the US Atlas. The React component hierarchy separates data loading in `useData` from map rendering in `Marks`, though the visualization currently displays a static map without completing the data-to-color binding.

Yyuzhang21

80% match

Loading thumbnail…

Gist 7bcb7bfb170746a20c14

This choropleth maps U.S. county-level unemployment rates from 2008, encoding values from 0 to 15% using a quantize scale with nine discrete color classes. The SVG visualization uses a Mercator projection and TopoJSON data for county and state boundaries. Unemployment data is loaded from a TSV file and joined to county IDs via a `d3.map`, with each county’s fill class (q0-9 through q8-9) assigned by the quantized rate, producing a blue sequential palette from light to dark. County boundaries are stroked in white and state borders in white with rounded joins, while the background remains transparent. The example highlights the use of quantize scales for continuous-to-discrete mapping and suggests a threshold scale as an alternative for arbitrary ranges.

11wheel

80% match

Loading thumbnail…

Choropleth

This choropleth maps U.S. county-level unemployment rates from 2008, encoding values with a d3.scaleQuantize that bins rates from 0 to 15% into nine color classes. Rendered with SVG, the map uses a white state boundary overlay to delineate county borders, while the quantized color scale (from light blue to dark navy) visually distinguishes unemployment ranges. The visualization is built with D3 v4 and TopoJSON, and it includes a resize handler to scale the map responsively.

EEvertLagerberg

80% match

Loading thumbnail…

Gist d8a8c52a3d98232cd513f1f5364a6e5c

This example displays a choropleth map of U.S. county unemployment rates, using a blue sequential color scale ranging from light to dark shades. The map is rendered as SVG paths via `d3.geo.path` with an Albers USA projection, while county data is joined to `d3.map` values from an external TSV. State boundaries are drawn as a white mesh overlay using TopoJSON. The code relies on `queue`, `d3.json`, `d3.tsv`, and `d3.scale.quantize` to bin rates into nine classes.

JJn1532

80% match

Loading thumbnail…

Gist 5665764

This choropleth maps U.S. county-level unemployment rates from 2008 using a quantize scale, which assigns each county to one of nine color classes based on rates from 0 to 15%. The map is rendered with SVG paths for counties, colored via CSS classes q0-9 through q8-9, and includes state boundary outlines overlaid for context. The data is loaded from an external TSV file, and clicking a county or hovering over a state logs the element or feature to the console.

11wheel

79% match

Loading thumbnail…

Fork of United States Educational Attainment - Choropleth Map

A choropleth map shows the percentage of adults with a bachelor's degree or higher across U.S. counties, using a purple sequential color scale. Hovering over a county displays a tooltip with the county name, state, and exact percentage. The visualization loads county boundaries from TopoJSON and education statistics from a FreeCodeCamp-hosted JSON dataset, rendering them as SVG paths via `geoPath`. React manages the component state, while D3 v5 handles the `scaleThreshold` color mapping and the interactive legend.

AAndre J Denais

79% match