Blog

Choropleth Maps

Choropleth maps show areas in different shades and/or colors according to statistical differences between areas. I wanted to learn more about how to make them so I did the following exercise.

Creating such maps is made a lot easier by tools and work that has been done already. Specifically, in this case:

  • Leaflet is a JavaScript library "for mobile-friendly interactive maps."
  • OpenStreetMap supplies Open Source map images of places around the world.
  • Various sources provide geo data (vector outlines) of the 50 US states. Here (for example) is the data for the outline of Texas, available in JSON format.

To learn more about choropleth maps, I started with this Leaflet tutorial, which shows population density for each US state. I then made these changes:

  1. Separate the geo data -- which defines the outlines of the states -- from the population density data; they were previously in the same data file.
  2. Make it easier to add new categories that use the same map. You define a category by supplying the data, the colors, and the range of values for each color.
  3. Instead of showing the state's value in the upper-right corner as in the tutorial, I show it near the mouse pointer when you hover over a state, since that's where you are already looking anyway.
  4. Add a menu with each of the categories to choose from.

NOTE: At the moment the demo works best on a laptop or larger display.

Since a graph/chart is only valuable if you can trust the data, I include a link at the bottom of the legend to the source of the data for each category:

  • Population Density: The US Census Bureau publishes data showing the number of people per square mile in each state.
  • Craft Breweries (2016): Brewers Association shows the number of craft breweries per 100,000 adults.
  • Healthcare Payments (2013): Open Payments Data shows payments made by the healthcare industry (i.e. drug and device companies) to physicians or teaching hospitals.
Published: 5 Mar 2018