100%

usa map

✓ Published0🌍 Public

Last edited Mar 18, 2023

Created on Mar 18, 2023

Forked from Fork of Fork of United States Educational Attainment - Choropleth 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.

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

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

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

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

91% match

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

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

90% match

Loading thumbnail…

test

This choropleth map shades US counties according to the percentage of residents with a bachelor's degree or higher, using an orange-yellow sequential color scale. The visualization leverages React for the SVG rendering, with D3's `geoPath` for drawing county, state, and nation boundaries from a TopoJSON source. Education data is fetched from a freeCodeCamp-hosted JSON file, and county colors are mapped via D3's `scaleSequential` and `interpolateYlOrRd`.

Ttomahawk-jupiter

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

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

88% match