Skip to main content
SimilarExport ZIP
100%

ICE-8 — Section 1: US Choropleth Map

✓ Published0🌍 Public
Ssivaniammisetti2001@gmail.com
Last edited Apr 13, 2026
Created on Apr 13, 2026
Forked from Fork of Hello HTML

A choropleth map of the United States colors each state by median household income for 2022, using darker blues to indicate higher earnings. The map renders state boundaries as SVG paths generated by `d3.geoPath` from TopoJSON data in `us-atlas@3`, projected with `d3.geoAlbersUsa`. A sequential color scale, `d3.scaleSequential(d3.interpolateBlues)`, maps income values to fill colors, while hover interactions display a tooltip listing the state name and income. The income figures come from the US Census Bureau.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8-Making Maps Using TOPOJSON hd

This choropleth map visualizes 2024 average household income estimates for U.S. states, using a blue-to-green sequential color scale to represent values from $50,000 to $100,000. The visualization uses d3.geoPath with a geoAlbersUsa projection to render TopoJSON state boundaries, with each state filled based on its associated income data. Interactive tooltips appear via mouseover events, showing the state name and income value, while a gradient legend with a d3.axisBottom scale displays the color-to-value mapping. The code leverages d3.scaleSequential, topojson.feature, and the us-atlas states-10m dataset.

HHarshithaDontha@my.unt.edu
88% match
Loading thumbnail…

Ice 8 Map

This choropleth map displays average state income for 2024, coloring states in red shades and labeling the top five earners. The visualization uses d3.geoPath with a geoAlbersUsa projection to render state boundaries from TopoJSON. Income data loads from a CSV and maps to state names via d3.csv, with a tooltip revealing values on hover. The map includes an animated fade-in on hover and a centered color legend indicating income ranges.

Ddiwashhumagain@my.unt.edu
86% match
Loading thumbnail…

ICE8 USA Map

A choropleth-style map of the United States renders each state as an SVG path, colored with a categorical scale and labeled with its name at the centroid. Hovering turns a state red via CSS. The code loads TopoJSON state boundaries from the us-atlas package and uses `d3.geoAlbersUsa` for projection, `d3.geoPath` to generate paths, and `d3.scaleOrdinal` with `schemeCategory10` for fill colors.

Ggeethikal
84% match
Loading thumbnail…

ICE 8

This visualization displays a choropleth map of the United States, with each state filled by a categorical color from the D3 category10 scheme. The map uses the geoAlbersUsa projection and renders state boundaries as SVG paths with white strokes via d3.geoPath. It loads US Atlas TopoJSON data from a CDN, extracts state features using topojson’s feature function, and shows state names as tooltips on hover.

66264kusuma@gmail.com
82% match
Loading thumbnail…

ICE8_US_States_Population

This choropleth map displays U.S. state populations, with darker blue fills indicating higher population values and gray for states without data. It uses D3 v7 with `d3.geoAlbersUsa` projection, `d3.geoPath` for rendering, and `topojson.feature` to parse the us-atlas states-10m TopoJSON source. A `d3.scaleSequential` with `d3.interpolateBlues` maps population values to colors, while mouseover events update an HTML tooltip showing state names and population in millions.

Sshyamraghav12@gmail.com
82% match
Loading thumbnail…

ICE8- Map

This choropleth map shows the population of each U.S. state using 2020 Census data, with states colored according to their population totals and a tooltip revealing the state name on hover. The visualization loads US states from the us-atlas TopoJSON file and renders them using d3.geoPath with the d3.geoAlbersUsa projection. Population values are mapped to a color scale, while the SVG states respond to mouse events for interactive inspection.

Bbrodyoneal10@gmail.com
82% match
Loading thumbnail…

ICE 8-1.2

This choropleth map displays the crime rate per 100,000 people across U.S. states, using a sequential blue color scale where darker shades indicate higher rates. Hovering over a state reveals a tooltip with the exact value, while states without matching data appear gray. The visualization loads CSV data and U.S. TopoJSON boundaries, then renders them as SVG paths via `d3.geoPath` with an Albers USA projection. It uses D3 v7 for data binding, color encoding, and interactive tooltips, with state names normalized and matched against FIPS codes for labeling.

Ssakethpapareddy@gmail.com
82% match
Loading thumbnail…

ICE 8-2

A choropleth map of the United States displays population density in people per square kilometer, using a yellow-to-red sequential color scale for each state. The map uses an Albers USA projection with `d3.geoPath`, loading state boundaries as TopoJSON from the us-atlas package. State names and density values appear as labels for the most densely populated regions, and a gradient legend at the bottom right maps color to density values. Tooltips on each state show its name and population density on hover.

Aanirudhrao345@gmail.com
82% match