Skip to main content
SimilarExport ZIP
100%

fcc Choropleth

✓ Published1🌍 Public
Ppkdvalis
Last edited Jan 4, 2024
Created on Nov 20, 2023
Forked from Hello VizHub

This choropleth shows the percentage of adults aged 25 and older with a bachelor's degree or higher across U.S. counties. The map uses color categories to represent educational attainment levels, with a legend dividing data into four ranges from 0-11% to 35% and above. It is built with D3 v5, converting TopoJSON county boundaries to GeoJSON via `topojson.feature` and rendering them as SVG paths using `d3.geoPath`. The underlying data comes from a USDA Economic Research Service dataset.

AI-generated description

freeCodeCamp D3 Choropleth project

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of fcc Choropleth

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, using a four-color scale. Tooltips reveal the county name, state, and exact percentage on hover. The visualization uses d3.json to load TopoJSON county boundaries and education data, then renders them with d3.geoPath. Color encoding is assigned via a simple threshold function, while mouse events manage the tooltip. Data originates from the USDA Economic Research Service.

NNita
89% 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
86% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes the percentage of residents with a bachelor’s degree or higher across U.S. counties. Each county is filled with a color from the d3.schemeGreens palette, mapped through d3.scaleThreshold to the education data. The map uses d3.geoAlbersUsa projection with d3.geoPath to render county boundaries from TopoJSON data, while a color legend built with reusable D3 code shows the scale. The visualization also supports zooming and panning via d3.zoom.

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

(FCC) Data Visualization Certification - Project 4 - Choropleth Map

This choropleth map displays the percentage of adults with a bachelor’s degree or higher across U.S. counties, using a sequential color scale to encode educational attainment. It renders GeoJSON county boundaries via `d3.geoPath` and an SVG projection, while a tooltip (shown when hovering over a county) reports the exact education rate. The visualization loads two JSON datasets concurrently through `Promise.all`, fetching county topology and education statistics from freeCodeCamp’s CDN, then binds the education data to the map features using D3’s data joins. The page relies on D3 v5 for all geographic and data manipulation.

FFred B.
85% 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
84% match