State Map with Population

Last edited Nov 9, 2025

Created on Nov 6, 2025

Forked from Fork of State Map with Population - Rajan

This visualization presents two maps: a world map using the Aitoff projection and a US state choropleth displaying unemployment rates. The US map colors states on a sequential scale, with hover interactions revealing exact values via a tooltip. Built with D3 v7, it uses `d3.geoAitoff` and `d3.geoAlbersUsa` for projections, `d3.geoPath` for rendering, and TopoJSON data from world-atlas for country and state boundaries. The choropleth color encoding is generated dynamically from inline CSV data, with a legend included.

AI-generated description

MIT Licensed

Similar vizzes

Rajan

This choropleth map displays the 2024 unemployment rate for each U.S. state, using a red color scale from 2% to 6%. Hovering over a state reveals its exact rate via a fixed tooltip. The visualization is built with D3 v7 and TopoJSON, using the `geoAlbersUsa` projection and `geoPath` to render state boundaries from the us-atlas TopoJSON file. The color mapping relies on D3's `scaleQuantize` and `schemeReds` palette, with an interactive legend generated from the scale's inverted extents.

88% match

Fork of State Map with Population - Rajan

A fork of a U.S. state map choropleth visualizes state population data using a blue sequential color scale. The visualization loads TopoJSON from the `us-atlas` package and a text file of state populations, parsing both via `Promise.all` and `d3.json`/`d3.text`. It projects boundaries with `d3.geoAlbersUsa` and `d3.geoPath`, and maps FIPS codes to state names via a lookup table. Users inspect values through an HTML tooltip triggered by mouseover, with SVG rendering for all map elements.

85% match

This choropleth map visualizes U.S. state populations, filling each state with a blue color scale from light to dark based on its population value. It uses d3.geoAlbersUsa for projection and d3.geoPath to render TopoJSON state and nation outlines from the us-atlas dataset. Population data is loaded from a separate text file and parsed into a lookup table, with tooltips appearing on hover. The visualization is built with D3 v7 and rendered as SVG.

Sson.sultan@yahoo.com

79% match

TopoJSON - Rajan

A world map choropleth visualizes population estimates by country, with countries colored on a blue sequential scale, while nations lacking data appear in gray. The example loads country boundaries from TopoJSON via the `topojson-client` library and renders them with `d3.geoPath` in an SVG, applying a Mercator projection. Interactive tooltips display each country’s population value on mouse hover. The color mapping is derived from a `d3.scaleQuantize` scheme, and the map includes a graticule overlay for reference.

78% match

Q1

This interactive visualization presents two maps side-by-side: a world map colored by continent and a US map showing unemployment rates by state. The world map uses `d3.geoNaturalEarth1` projection to display countries from the `world-atlas` dataset, with countries colored via `d3.scaleOrdinal` based on a continent mapping. The US map employs `d3.geoAlbersUsa` projection with the `us-atlas` states dataset, rendering geographic paths through `d3.geoPath`. Both maps include graticule overlays, hover tooltips, and SVG-based rendering with animated state transitions between views.

RRuthvik Bairaboina

A9-US Choropleth Map

This animated choropleth map displays the 2020 census population for each U.S. state, using a color scale to encode population values with interactive tooltips. The visualization loads population data from a CSV file and U.S. state boundaries from TopoJSON, then uses `d3.geoAlbersUsa()` for the projection and `d3.geoPath()` to render the SVG paths. State polygons are colored by population via a color scale, with a tooltip showing details on hover.

Bbhavi.kenia@gmail.com

World Map

A choropleth map of the United States colors individual states by population using a D3 threshold scale, with darker shades representing higher population values. The visualization loads geographic boundaries from a TopoJSON file via the `us-atlas` package and converts them to GeoJSON using `topojson.feature`. A `d3.geoAlbersUsa` projection is fitted to the SVG dimensions, and `d3.geoPath` renders each state as an SVG path. Population data for ten states is provided inline as a Map, with states lacking data shown in the lightest color.

KKOLLIPATI NIKHIL

Section 1(a)-Making Maps Using TOPOJSON

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.

SSYAM TEJ