Skip to main content
SimilarExport ZIP
100%

Fork of ICE 8-Making Maps Using TOPOJSON hd

✓ Published0🌍 Public
Ssravya7136@gmail.com
Last edited Nov 9, 2025
Created on Nov 9, 2025

This visualization displays the ten most populous U.S. states in 2020 on a choropleth map, with all other states shown in a neutral gray. It loads U.S. state boundaries from a TopoJSON file and population data from a CSV, then uses `d3.geoAlbersUsa` with `d3.geoPath` to render the map as SVG. A sequential color scale using `d3.interpolateYlGnBu` encodes population values, and a linear gradient legend with `d3.axisBottom` communicates the color mapping. Hovering over a state reveals its population or a note that it is not in the top ten.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE8_US_States_Population

This example displays U.S. state population data as a choropleth map, with darker blue representing higher population. Ten states are mapped to population values, while all other states appear gray. The tooltip reveals the state name and population in millions upon mouseover. The map draws state boundaries as SVG paths using `d3.geoPath` with a `geoAlbersUsa` projection. Data is loaded from the `us-atlas` TopoJSON file, transformed with topojson-client, and colored through a sequential blue scale from `d3.scaleSequential`. Boundary strokes are added using `topojson.mesh`.

Sshyamraghav12@gmail.com
90% 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
90% match
Loading thumbnail…

Fork of Fork of ICE-8-VK-1.2

A choropleth map colors US states by 2023 population estimates using a sequential logarithmic blue scale. The visualization loads TopoJSON state boundaries from us-atlas, projects them with d3.geoAlbersUsa, and renders each state as an SVG path via d3.geoPath. Hovering reveals a tooltip with the state name and formatted population, while the embedded Census Bureau data drives the fill colors.

Ssairathan.p045@gmail.com
89% match
Loading thumbnail…

Fork of Fork of ICE8 USA Map

This example displays a choropleth map of U.S. states, each filled with a distinct categorical color and labeled with its name at the geographic centroid. The visualization uses d3.geoAlbersUsa for projection and d3.geoPath to render state boundaries from TopoJSON data loaded from us-atlas. A d3.scaleOrdinal with schemeCategory10 supplies the fill colors, and hover interactions turn states red via CSS. State names are appended as SVG text elements positioned by d3.geoPath.centroid.

Ssivamani
87% match
Loading thumbnail…

Fork of ICE8 USA Map

This fork of the ICE8 USA Map displays a choropleth of U.S. states, each filled with a categorical color from the `d3.scaleOrdinal` / `d3.schemeCategory10` palette and labeled with its name. It uses `d3.geoPath` with the `geoAlbersUsa` projection to render state boundaries from the `us-atlas` states-10m TopoJSON file, with `topojson.feature` extracting the state features. State names are placed at polygon centroids, and hovering turns a state red via CSS.

CCHANDU BHARGAVI
86% 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
86% 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
86% match
Loading thumbnail…

Fork of ICE8 USA Map

This fork of the ICE8 USA Map displays a choropleth of U.S. states, colored in light sea green with hover states highlighting each state in orange-red. It renders an SVG map using D3 v5, the `geoAlbersUsa` projection, and `d3.geoPath` to draw state boundaries from TopoJSON data loaded from the us-atlas repository. State name tooltips appear on hover via appended `title` elements. The code imports `select`, `json`, `geoPath`, and `geoAlbersUsa` from D3, along with `feature` from TopoJSON.

Ffouzanuddin
85% match