mmehta63

100%

✓ Published0🌍 Public

Last edited Feb 24, 2020

Created on Feb 23, 2020

This choropleth map of U.S. counties visualizes education statistics, with each county shaded on a purple scale according to its percentage of educated residents. Hovering over a county reveals a tooltip with its name, education rate, and counts of qualified professionals, high-school graduates, and middle-school-or-lower graduates. The visualization combines `d3.geo.albersUsa` and `d3.geo.path` for map projection and rendering, uses `d3.csv` and `d3.json` to load education and geographic data, and employs `d3.tip` for interactive tooltips.

AI-generated description

MIT Licensed

Similar vizzes

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

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

81% match

Loading thumbnail…

fcc-d3-04

A choropleth map of U.S. county education levels, rendered as SVG paths with an Albers USA projection, displays a visual distribution of data across the country. The React app loads county boundary TopoJSON and education statistics via `d3.json`, then uses `d3.geoPath` with `geoAlbersUsa()` to project each county boundary. While the code defines the map’s layout and data fetching, the actual color encoding for each county’s education value is not implemented, leaving the map uncolored. The visualization depends on React state to coordinate asynchronous loading of both datasets before rendering.

SSiddharthMittal07

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

81% match

Loading thumbnail…

Untitled

This choropleth map displays U.S. county-level education data, with each county drawn as a filled path whose color would encode the associated metric. The visualization loads county boundaries from a TopoJSON file and joins them with a separate JSON dataset containing education statistics. Using d3.geoPath, the code renders the geographic features into an SVG canvas, while d3.json is used to fetch both data sources sequentially, ensuring the map draws only after all data arrives.

Llupica.matthew@gmail.com

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

81% 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.

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

79% match