Population Choropleth

100%

Population Choropleth

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Aug 23, 2013

A population choropleth of U.S. counties uses a logarithmic color scale to show population density, ranging from pale yellow to dark blue. The map projects counties with d3.geo.albersUsa() and renders them as SVG paths via d3.geo.path. Density is calculated by dividing each county’s population (from the 2010 Census shapefile, converted to TopoJSON) by its projected area, with the color domain set between the 1st and 99th percentiles. The topojson.feature API extracts county geometries for display.

AI-generated description

Note: the counties aren’t clipped to water boundaries, so they look a bit weird and the corresponding density calculation is inaccurate. So don’t copy this example without fixing those problems first, ok? See the us-atlas project for a more comprehensive Makefile of examples, and the projected choropleth example for a better style. Also, you’ll want to add a legend for the color scale.

To build this example, git clone this repo, npm install, and then make.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

d3 Choropleth map

This choropleth map shows U.S. counties colored by their 2023 population estimates, using a logarithmic threshold color scale with seven blues to reveal regional population patterns. It loads population data from a CSV and county boundaries from a TopoJSON file via Promise.all, then renders the map using d3.geoPath on SVG paths. The fill color is assigned per county using d3.scaleThreshold and FIPS codes, with a d3.legendColor legend and a title clarifying the data shown.

Ccwb314159@gmail.com

86% match

Loading thumbnail…

Area Choropleth

This example shows a choropleth of U.S. counties where each county’s color encodes its geographic area on a logarithmic scale from brown (small) to steelblue (large). The map renders county boundaries as SVG paths using `d3.geo.path()` and TopoJSON, with state outlines drawn as white strokes. The fill color is computed by passing each path’s area, obtained via `path.area(d)`, into a `d3.scale.log()` with a domain of 10 to 500. The data comes from a local `us.json` TopoJSON file, and the visualization uses d3.v3.

Mmbostock

85% match

Loading thumbnail…

Choropleth population map

A choropleth map of the United States displays 1990 county-level population estimates from a CSV file, with counties shaded from light beige to dark red based on population. The map uses a blue-to-red sequential color scale, and hovering over a state dims others, highlights the selected one with a black stroke, and shows a tooltip with the state name and its population value. Built with D3.js (d3.v3), the visualization uses `d3.csv` to load data, `d3.geo.path` to render geographic features from a TopoJSON file, and `d3.mouse` events to manage tooltip positioning.

Pprateekvasi

83% match

Loading thumbnail…

Choropleth population map

A choropleth map of the United States displays state-level population counts from 1990, using a color gradient from light orange to dark red. The map is rendered as SVG with D3 v3, leveraging `d3.geo.path` and TopoJSON for state boundaries. Population data from a CSV file is joined to state IDs, and a custom `d3.scale.quantize` interpolates colors across 100 steps. Hovering over a state triggers a tooltip and animates opacity, while the legend and interactivity are built with jQuery and D3 transitions.

Vvishusikka

82% match

Loading thumbnail…

Untitled

This choropleth map shows the population distribution across U.S. counties, with a color scale from light blue to red indicating population magnitude. The visualization is rendered as SVG using D3 v7, employing `d3.geoAlbersUsa` for projection and `d3.geoPath` to draw county boundaries from `counties.json`. Population data is loaded from `PopulationEstimates.csv` and matched to counties by name, with a tooltip showing county name and population on mouseover. The code uses a sequential color scale with an RGB interpolator.

Eeranyoung

82% match

Loading thumbnail…

State Map with Population

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

82% match

Loading thumbnail…

Choropleth Map of County Data

This choropleth map colors U.S. counties to visualize geographic data, with state boundaries drawn as white lines for contrast. The map is rendered as SVG using `d3.geoPath` to project TopoJSON geometry onto a 960×600 canvas. County and state shapes are styled via CSS classes, with the d3-scale-chromatic library available for color encoding. A small script sets a tooltip title on the label element, though the map itself does not display interactive data values.

SShabani Muswamba

81% match

Loading thumbnail…

Choropleth Map of County Data

A choropleth map of U.S. counties visualizes poverty rates as filled paths, with a color legend and axis labeling the percentage scale. Built with d3.v5, it loads TopoJSON county boundaries and a CSV of poverty data, then uses d3.geoPath to render SVG shapes and d3.scaleThreshold with d3.schemeGreens for the color encoding. State borders are drawn as white mesh lines, and hover tooltips show each county’s exact rate.

Yyqinolive

81% match