Skip to content
ctzn-geo

About

ctzn-geo has two aims. The first is to show data on subjects we want to understand, mapped from US block groups up to the world’s countries: census estimates, presidential returns, and health, climate, income and population data. Each map also shows how one choice behind it, the geography, the class rule, the colours, the form or the projection, changes what the same numbers appear to say.

The second is to build reusable map components in TypeScript for other projects. Every map on the site is drawn with them, and the component catalog lists each one with its input contract, its behaviour when data is missing and its known limits.

Who makes it

Uma Huggins and Vishal Singh. Every dataset, its licence and how to cite the site are on Sources and licences.

Built with

Maps

MapLibre GL JSv6
The zoomable WebGL maps: choropleths, proportional symbols and the two-variable map.
PMTilesv4
Reads vector tiles for block groups, tracts and counties from single static files, with no tile server.
OpenFreeMap
The basemap's roads, water and place labels.
SVG
The projection panels, Dorling cartogram, scatterplot, sparklines and legends, with the projections and layout written here rather than taken from a library.

Site

Next.jsv16
Pages, routing and the data routes; most pages are prerendered.
Reactv19
Every map, key and control is a component.
TypeScriptv5
Throughout, including the tests.
Tailwind CSSv4
Styling, on top of the site's own colour tokens.
next-themesv0.4
Light and dark.

Data and tiles

Python
Fetches census estimates and builds the boundary files, with Shapely and pyshp.
tippecanoe
Turns the boundaries into PMTiles.
Tigris
Object storage that serves the tilesets.

Checks and hosting

Node test runner
Recomputes the numbers the gallery captions and pages state.
Playwright
Captures the gallery's thumbnails from the live pages.
Vercel
Hosting.