Skip to main content
SimilarExport ZIP
100%

Ice 8 Map

✓ Published1🌍 Public
Ddiwashhumagain@my.unt.edu
Last edited Nov 2, 2025
Created on Nov 1, 2025
Forked from 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.

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
86% 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
79% 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
77% match
Loading thumbnail…

Data Visualization ICE8 - Country Map

This example displays a choropleth-style map of the United States using red-filled states with blue outlines and green hover states. Built with D3 v5 and TopoJSON, it loads US Atlas state boundaries and projects them using `geoAlbersUsa`. The `geoPath` generator renders each state as an SVG `<path>`, with a `<title>` element revealing the state name on hover. The map uses the `geo-albers-usa-territories` library for accurate territory placement.

Ppravalika.thogaru10@gmail.com
77% match
Loading thumbnail…

ICE8-Country map

This choropleth-style map displays all 50 US states using an orange fill with black state boundaries, highlighting individual states in green when hovered. The visualization loads geographic data from a TopoJSON file via `useData()`, then renders it as SVG paths using `d3.geoPath()` with the `geoAlbersUsaTerritories()` projection. Built with React and D3 v5, the code integrates TopoJSON's `feature()` and `mesh()` functions to generate land polygons and interior borders.

KKolliTeja
77% 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
77% 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
77% match
Loading thumbnail…

Fork of ICE-8 — USA States Map

A choropleth of the United States displays each state’s population from the 2020 census via a yellow-orange-red sequential color scale. The map renders with D3.js v7 and the TopoJSON library, using `d3.geoAlbersUsa` for the Albers projection and `d3.geoPath` for state boundaries. Hovering over a state reveals its population in a tooltip, while gray fills indicate missing FIPS codes from the `us-atlas` dataset.

Ssravya7136@gmail.com
77% match