Choropleths: color-coded maps showing data by state or other geography

A Choropleth is a colored map, typically showing information gathered by some kind of census. A well-known example is the New York Times’s COVID-19 map.

Let’s say you have some data that’s coded by geographic area. For example, you might have a table showing the number of COVID cases per 100,000 people county by county in Massachusetts. It might look like this:

fips  state         county        cases/100,000   deaths/100,000
25001 Massachusetts Barnstable              133                1
25003 Massachusetts Berkshire               170                6
25005 Massachusetts Bristol                2623              139
25007 Massachusetts Dukes                   814                0
25009 Massachusetts Essex                  1062               54
25011 Massachusetts Franklin                121               11
25013 Massachusetts Hampden                2565              181
25015 Massachusetts Hampshire               330               16
25017 Massachusetts Middlesex               760               39
25019 Massachusetts Nantucket              1912               18
25021 Massachusetts Norfolk                 732               57
25023 Massachusetts Plymouth                910               49
25025 Massachusetts Suffolk                1478               56
25027 Massachusetts Worcester               638               30

How do you make your own choropleth from your data? There are a few ways.

  • One is to use Tableau Public, a free service from the Tableau data visualization service online.
  • Another is to use the Javascript d3 package to draw your choropleth on your own web page. This walks you through doing that work.

What’s in your data?

The first column is a FIPS county code.  Each code uniquely identifies a county in the USA. This code comes in handy for making choropleths: all sorts of county-by-county data carries FIPS codes identifying the counties. In particular, we’ll need map data showing the county outlines.

The next four

What do you need?

To get all this to work you need these programs and data.

  • Your data, stored in a CSV file.
  • Map data containing the boundary of each county along with its FIPS code. This comes from the US Census Bureau’s Cartographic Boundary Shapefiles, via Michael Bostock’s TopoJSON project on Github. In his us-atlas repository he has translated the Shapefiles to the TopoJSON format. That’s what you need to make the map your choropleth. There are plenty of other sources for boundary data in TopoJSON format, but this project has organized it nicely for displaying county-by-county maps.
  • Software for drawing and color coding your map on a web page. Here you’ll use the d3-geomap Javascript package. It’s a module of the extensive open-source D3.js Javascript library for data visualization on the web.
  • An Integrated Development Environment (IDE). I like Webstorm. Many people like Microsoft Visual Studio Code.


Leave a Comment