Skip to main content
SimilarExport ZIP
100%

Fork of United States Educational Attainment - Choropleth Map

✓ Published4🌍 Public
AAndre J Denais
Last edited Aug 4, 2022
Created on Aug 4, 2022

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.

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…

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
100% match
Loading thumbnail…

Fork of Fork of United States Educational Attainment - Choropleth Map

A choropleth map of the United States displays the percentage of adults with a bachelor's degree or higher by county, using a sequential purple color scale from d3.scaleThreshold. The visualization includes an interactive tooltip showing the county name, state, and exact percentage on mouse hover, along with a legend mapping color bands to percentage ranges. Built with React and D3 v5, it renders counties as SVG paths using d3.geoPath and TopoJSON data, with the project sourced from FreeCodeCamp's educational attainment and county boundary datasets.

VVu Le
97% 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
96% match
Loading thumbnail…

Fork of 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 US counties from 2010-2014. Counties are colored using a sequential purple color scale, with gray indicating missing data. Built with React and D3 v5, it uses `d3.geoPath` to render county boundaries from a TopoJSON file and `d3.scaleThreshold` to define color bins. Hovering over a county triggers a tooltip displaying the county name, state, and percentage.

HHasan Ismayilov
96% match
Loading thumbnail…

Fork of Fork of United States Educational Attainment - Choropleth Map

This choropleth map of the United States visualizes the percentage of adults aged 25 and older with a bachelor’s degree or higher, using a purple sequential color scale to encode educational attainment by county. County boundaries are rendered as SVG paths via `d3.geoPath`, with missing data shown in gray. A custom `d3.scaleThreshold` color legend displays class breaks, while mouseover interactions reveal county names, states, and percentages in a blurred tooltip. The visualization combines React components with D3 v5, importing data from FreeCodeCamp’s JSON endpoints for county boundaries and educational statistics.

TThaverman
95% match
Loading thumbnail…

Fork of Choropleth Maps

This fork of a 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. It renders an SVG map with county boundaries and state outlines via d3.geoPath, with hover effects that highlight counties by transitioning their stroke color. The visualization uses a d3.scaleThreshold for color encoding, d3.csv and d3.json for loading data, and topojson to parse geographic features. A legend with an axis shows the percentile ranges.

RRyan G Tjakrakartadinata
92% match
Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes educational attainment across U.S. counties, using d3.scaleThreshold with a green color scale to encode the percentage of residents with bachelor’s degrees or higher. County boundaries are rendered as SVG paths via d3.geoPath and a geoAlbersUsa projection, with data loaded from FreeCodeCamp’s TopoJSON and JSON datasets. The map supports pan and zoom through d3.zoom, and includes a color legend built with reusable custom D3 components. Hovering highlights individual counties by changing their fill color.

IIvy Liu
91% 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
91% match