Skip to main content
SimilarExport ZIP
100%

Section 1(a)-Making Maps Using TOPOJSON

✓ Published2🌍 Public
SSYAM TEJ
Last edited Nov 9, 2025
Created on Nov 4, 2025
Forked from Fork of T1-MAP-CM

This choropleth map visualizes 2024 US state unemployment rates using D3.js v7 and TopoJSON. It shows each state colored on a red-yellow-green sequential scale, where green indicates lower unemployment and red indicates higher rates, with hover interactions revealing exact percentages via a tooltip. The map uses `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries from the us-atlas TopoJSON dataset, while `d3.scaleSequential` with `d3.interpolateRdYlGn` drives the color encoding, and an SVG linear gradient legend communicates the scale.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth map in D3

This choropleth map visualizes 2023 US unemployment rates by state, coloring each state with a sequential scale from the minimum to maximum unemployment values. Hovering over a state reveals a tooltip with its name and unemployment figure. Built with D3.js, it loads unemployment CSV data and US state TopoJSON boundaries, then projects the states using `d3.geoAlbersUsa` and renders them as SVG paths via `d3.geoPath`. The map joins the CSV data to the geometry using a state name-to-FIPS code mapping.

Kkfhujosefsson@dons.usfca.edu
90% match
Loading thumbnail…

Q1-ASSIGN-8

This choropleth map displays 2023 US unemployment rates by state using a purple sequential color scale and an Albers USA projection. It employs `d3.geoPath` with the `topojson` library to render state boundaries from the us-atlas TopoJSON, while a custom tooltip shows state names and exact percentages. Data originates from the Bureau of Labor Statistics, rendered as SVG with a gradient legend indicating relative unemployment levels.

Kkpavithrasai@gmail.com
90% match
Loading thumbnail…

State Choropleth Map

A choropleth map of the United States displays county-level unemployment rates from 2021, using a blue sequential color scale and a corresponding legend. The visualization is built with D3.js v5, leveraging `d3.geoPath` for rendering SVG paths, `d3.scaleThreshold` for color binning, and `d3.json` to load TopoJSON geographic data. A hover tooltip, implemented with a D3-selected `div`, reveals each county's specific unemployment percentage.

Mmariahdiaz
88% match
Loading thumbnail…

Chloropleth Map

This choropleth map displays the 2022 unemployment rate for each U.S. state, with a blue sequential color scale indicating higher rates. It uses d3.geoPath with a d3.geoMercator projection to render state boundaries from a TopoJSON file, while a threshold scale maps unemployment percentages to d3.schemeBlues. Hovering over a state changes its fill to red via CSS. Data comes from a CSV file joined to state names, and tooltips show the exact rate per state.

AAllen Ho
87% match
Loading thumbnail…

Assignment8_Manisha_USMap

This choropleth map displays US state unemployment rates, with each state colored on a sequential blue-purple scale (d3.interpolatePuBu) according to its percentage. The visualization loads state boundaries from the us-atlas TopoJSON file and joins CSV data containing state names and unemployment values. Hovering over a state reveals a tooltip showing the state name and its unemployment rate or “N/A” for missing data. The map uses d3.geoPath with a d3.geoAlbersUsa projection and renders as SVG, with states encoded as paths and tooltip positioning handled via mouse events.

Kkonudulamanisha@gmail.com
86% match
Loading thumbnail…

d3 chorplath map

This choropleth map of the United States displays county-level unemployment rates using a quantized color scale. The visualization renders counties as SVG paths, colored from light to dark blues based on rates from 0 to 15 percent, with state boundaries overlaid in white. Built with D3 v3, it uses `d3.geo.albersUsa` and `d3.geo.path` for projection, TopoJSON for US county and state geodata, and a queue to load JSON and TSV data asynchronously.

JJn1532
86% match
Loading thumbnail…

D3 Choropleth Starter

A choropleth map of United States county unemployment rates, colored with a blue threshold scale. The map displays each county as a path, with hover tooltips showing the exact rate. The visualization loads county boundaries and unemployment data via Promises, then renders them using D3's `geoPath` and TopoJSON feature extraction. A legend with an axis shows the color scale, while state borders are drawn as a white mesh overlay.

AAlark Joshi
85% match
Loading thumbnail…

Choropleth Map

This example uses a choropleth map to display the unemployment rate (%) for each U.S. state. The color of each state corresponds to its value, with a legend on the right providing the scale. The map is rendered using D3.js (v5) and React, with the `d3.geoPath` projection drawing the state boundaries and a TopoJSON mesh creating the white state separations. A tooltip is appended to each state path to reveal the exact state name and unemployment rate. The data is stored in a Map object and applied to each state's fill color via the `color` scale.

Rrobertmreedy
85% match