100%

United States Educational Attainment - Choropleth Map

✓ Published6🌍 Public

Last edited May 25, 2022

Created on May 19, 2022

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.

AI-generated description

United States Educational Attainment - Choropleth Map

:camera: Preview:

: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…

United States Educational Attainment - Choropleth Map

A choropleth map of the United States displays the percentage of adults age 25 and older with a bachelor's degree or higher per county for 2010–2014, using a sequential color scale. The visualization is built with React and D3 v5, rendering counties via `geoPath` from TopoJSON data. It uses `scaleThreshold` for color binning, `scaleLinear` for the legend axis, and interactive tooltips that appear on mouse hover.

LLamaab02

95% 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

95% match

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

93% match

Loading thumbnail…

United States Educational Attainment

A choropleth map of the United States displays the percentage of adults aged 25 and older with a bachelor's degree or higher, using data from the USDA Economic Research Service (2010-2014). County polygons are rendered via `topojson.feature` and `d3.geoPath`, colored by a threshold scale with the `d3-schemeGreens` palette. A tooltip, built with D3's `d3.select` and `d3.map`, shows each county’s area name, state, and percentage on mouseover. The map includes a legend generated with `d3.axisBottom` and a matching color scale.

Vvaynexie

92% 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

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

91% match

Loading thumbnail…

A9 - Choropleth Map

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.

RRiya Mathur

91% 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

90% match