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

100%

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

✓ Published0🌍 Public

Last edited Jan 26, 2023

Created on Jan 26, 2023

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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…

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

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

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

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

86% match

Loading thumbnail…

USA Education Choropleth Map (fcc project)

This choropleth map shows the percentage of adults with a bachelor’s degree or higher across U.S. counties, using a sequential YlGn color scale. The React app loads county, state, and nation boundaries from a TopoJSON file and education data from freeCodeCamp’s CDN, then renders them as SVG paths via `d3.geoPath`. County colors are assigned by looking up each county’s FIPS code in a Map, with white fill for missing data. State outlines are drawn as a mesh overlay, and the map is generated with `d3.json`, `topojson.feature`, and `scaleSequential`.

Ttomahawk-jupiter

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…

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