Skip to main content
100%

Gist 334df5480f67798d54a9b2e827a2c37f

✓ Published0🌍 Public
AAlan McConchie
Last edited Apr 14, 2021
Created on Apr 14, 2021

This visualization maps population counts for U.S. states and Canadian provinces using a geographic choropleth. It shows relative population density through color shading on a map, with darker areas indicating higher populations. The code uses D3.js with `d3.geoPath` to render the geographic outlines and applies a color scale to fill each region based on its population value from the CSV file. The visualization relies on standard D3 data loading and projection methods to display the map.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist c5464c81f3437808eb7f9c296e71b51a

This visualization displays the administrative boundaries of US states and Canadian provinces from a GeoJSON dataset. Using D3.js, the map renders the geographic polygons as an interactive choropleth, with each state or province colored distinctly. The visualization leverages the GeoJSON FeatureCollection to draw boundaries, highlighting the administrative regions of North America.

AAlan McConchie
84% match
Loading thumbnail…

Gist 67b5781267c697117dd271ab460c4a1a

This visualization maps Canadian census divisions, coloring each region by its 2016 population. The map is rendered as a choropleth using census division boundaries, with color intensity reflecting population counts. Hovering over a division highlights it and displays its name and population value. The visualization uses data from the 2016 Canadian Census, showing population distribution across provinces and territories at the census division level.

AAlan McConchie
81% 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
79% match
Loading thumbnail…

Population Choropleth

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.

Mmbostock
79% match
Loading thumbnail…

Choropleth Map

This choropleth map shows how Canada’s provincial and territorial populations changed annually from 1991 to 2019. Animated transitions recolor each region as a slider or playback control (not implemented here) would step through years. The visualization uses D3 v5 with `d3.geoPath` and a `d3.geoAlbers` projection to render TopoJSON boundaries, while population data is loaded from a CSV. Province fill colors are intended to map to population values, though the current code leaves them white.

GGraceXT
79% match
Loading thumbnail…

U.S. States

A choropleth map of U.S. states and world country borders, colored by population data (pop2005), uses a linear color scale from light gray to dark blue. The visualization, built with D3 v3, renders geographic features as SVG paths via `d3.geo.path` and a Mercator projection (`d3.geo.mercator`). Population data is loaded as TopoJSON from a CartoDB SQL API endpoint, and users can pan and zoom the map through `d3.behavior.zoom`, which updates the SVG group’s transform on redraw.

Aandrewxhill
78% match
Loading thumbnail…

USA geojson

This example displays a choropleth map of the United States using GeoJSON data from a gist, with each state’s population from 2010 encoded by color. It uses d3-geo’s `d3.geoPath` to render the state boundaries and fill them with a color scale based on the `POP2010` property. The map is drawn with SVG, and the layout is generated by projecting the geographic coordinates. The rendering demonstrates how spatial data can be visually encoded using standard D3.js geographic utilities.

JJn1532
78% match
Loading thumbnail…

Shared Data

This interactive map visualizes the population distribution of the United States by rendering state and county boundaries alongside state centroids. Built using D3.js, the visualization combines `d3.geoPath` to project and draw the geographic shapes from the included `us-states.json` and `us-counties.json` files, while `d3.geoPath` also handles the state centroids from `us-state-centroids.json`. The map is rendered dynamically, displaying the detailed boundaries and population data sourced from the provided gist.

Mmbostock
78% match