Skip to main content
100%

A9 - Choropleth Map

✓ Published0🌍 Public
RRiya Mathur
Last edited Mar 31, 2024
Created on Mar 31, 2024

This choropleth map displays the percentage of adults age 25 and older with a bachelor’s degree or higher across U.S. counties, using data from the FreeCodeCamp education dataset. Counties are colored with a threshold scale using `d3.schemePurples[8]`, with missing data rendered in gray. The map is built with React and D3 v5, using `d3.geoPath` to project county boundaries from TopoJSON, while a custom legend and hover tooltip show exact percentages. The tooltip positioning and visibility are handled manually through mouse events.

AI-generated description

United States Educational Attainment - Choropleth Map

:camera: Preview:

<img src="https://projects-preview.s3.eu-west-3.amazonaws.com/Heat+Map+mbdev.webp" />

:rocket: Stack: D3, React

:hammer: Module bundler: Rollupjs

:page_with_curl: US Education Data US County Data

:pushpin: Live Demo

MIT Licensed

Similar vizzes

Loading thumbnail…

usa map

This choropleth map shows the percentage of adults aged 25 and older with a bachelor's degree or higher across U.S. counties, using a sequential purple color scale. The visualization is built with React and D3 v5, projecting county boundaries via `d3.geoPath` from a TopoJSON file. County data is loaded from the U.S. Education Data JSON, with counties missing data rendered in gray. Hovering over a county triggers a tooltip displaying the county name and its percentage. A legend uses `d3.scaleThreshold` with a linear scale to map the color ranges.

Rrajamrit-singh
91% match
Loading thumbnail…

United States Educational Attainment - Choropleth Map

This choropleth map visualizes the percentage of adults aged 25 and older with a bachelor's degree or higher across U.S. counties, using data from the FreeCodeCamp education dataset. Counties are colored on a purple sequential scale, with gray indicating missing data. Built with React and D3 v5, the visualization uses `d3.geoPath` to render county boundaries from TopoJSON and `d3.scaleThreshold` to map education percentages to colors. A custom tooltip, implemented via global D3 selectors, displays county name, state, and value on hover, while a legend shows the threshold color scale.

MMohammed Banani | MbDev
91% match
Loading thumbnail…

Choropleth Maps

This choropleth map displays the percentage of adults with a bachelor’s degree or higher across U.S. counties for 2015–19, using a purple sequential color scale (d3.schemePurples) with a threshold legend. County boundaries are drawn via d3.geoPath, while state outlines are rendered as white meshes using topojson.mesh. Hovering a county highlights it with a black stroke via mouseover/mouseleave transitions. The data merges TopoJSON geographic shapes with CSV values keyed by FIPS codes, and the visualization is built with React and SVG inside a D3 v5 environment.

PPranay Matalia
90% match
Loading thumbnail…

Fork of United States Educational Attainment - Choropleth Map

This choropleth map displays the percentage of adults aged 25 and older with a bachelor's degree or higher across U.S. counties, using a purple sequential color scale and gray for missing data. Built with React and D3 v5, it renders county boundaries via `geoPath` and TopoJSON, with a threshold scale mapping education values to colors. Hovering reveals a tooltip showing the county name, state, and percentage. A legend below the map uses `scaleThreshold` and `invertExtent` to display color breaks, while data comes from FreeCodeCamp's education and county JSON files.

DDonald Bagwell
90% match
Loading thumbnail…

Assignment 9: Choropleth Map

This choropleth map displays the percentage of adults with a bachelor's degree or higher across U.S. counties for 2015–19, using a blue color scale. The visualization loads geographic data from a TopoJSON file and county-level statistics from a CSV, then renders each county as an SVG path filled according to its value. The code uses d3.geoPath for map projections, d3.scaleThreshold for color binning, and d3.schemeBlues for the palette. A legend with a bottom axis communicates the percentage ranges, and state boundaries are overlaid as white lines.

Aamrubal
89% match
Loading thumbnail…

Map of USA

This interactive choropleth map displays the percentage of adults age 25 and older with a bachelor's degree or higher across US counties, using data from the USDA Economic Research Service and TopoJSON map data from the US Census Bureau. County polygons are colored on a yellow-green sequential scale via `d3.scaleSequential` and `interpolateYlGn`, with `d3.geoPath` handling the SVG rendering. Hovering over a county reveals a tooltip showing the county name, state, and exact percentage. The visualization also includes a gradient legend built with D3 scales and React components for the header and tooltip.

NNita
88% match
Loading thumbnail…

Fork of Assignment 9: Choropleth Map

This choropleth map displays the percentage of adults with a bachelor’s degree or higher per U.S. county using a blue threshold color scale and a legend with tick marks. The code loads education data from a CSV and U.S. county boundaries from TopoJSON via `d3.json` and `d3.csv`, then renders paths with `d3.geoPath`. It uses `d3.scaleThreshold` and `d3.schemeBlues` for coloring, adds hover tooltips via SVG `<title>` elements, and overlays state boundaries with `topojson.mesh`. The visualization is built with D3 v5 and React, drawing to an SVG canvas.

CChase Hall
87% match
Loading thumbnail…

Fork of Assignment 9: Choropleth Map

This choropleth map visualizes the percentage of adults with a bachelor’s degree or higher across U.S. counties, using a blue sequential color scale with a legend. It renders SVG paths via `d3.geoPath` and TopoJSON data from `us-10m.v1.json`, while county values are loaded from `education.csv` and mapped with `d3.map`. The color scale employs `d3.scaleThreshold` and `d3.schemeBlues[9]`, with county tooltips showing exact percentages and state boundaries drawn as white strokes.

CChase Hall
87% match