Interactive Choropleth Map

Define: Choropleth Map

a thematic map in which areas are shaded (or patterned) in proportion to the measurement of the statistical variable being displayed on the map, such as population density or per-capita income.

The choropleth map provides an easy way to visualize how a measurement varies across a geographic area or it shows the level of variability within a region.

Come get all our code »

Food Insecurity in Pennsylvania

Design Request

Non-Profit: Coalition Against Hunger


In February/March 2013, the Coalition will release its first-ever “Hunger in Pennsylvania” report, publishing the most comprehensive data and analysis available on hunger and poverty for each of the state’s 67 counties. In addition to producing a hardcopy report that would be downloadable online, the Coalition would like to create an interactive hunger map of Pennsylvania’s counties—a tool that would undoubtedly raise awareness and increase engagement in the issue of hunger among members of the public, media and government.

Key Message:

Hunger exists in every community in Pennsylvania, and there are many programs that can help, if we ensure that all people have access to them.

Primary Audience:

This online interactive map is intended for a combination of Pennsylvania audiences—the media, anti-hunger organizations, social service agencies, educators, policymakers, as well as members of the general public.

Technical Specs

Data fields:

These will be displayed in a window on the top right-hand corner of the map


  1. Total population
  2. Food insecurity rate
  3. Child food insecurity rate
  4. SNAP participants
  5. Percentage of population receiving SNAP
  6. Number of WIC participants
  7. Number Free and Reduced-Price School Lunch recipients
  8. Number of Free and Reduced-Price School Breakfast recipients
  9. Number of State Food Purchase Program (Food Banks) participants

Project Repository:



  • PMS 157 (Print): rgb(237, 160, 79)
  • PMS 158 (Onscreen): rgb(232, 117, 17)

Map Colours

  • Map Color 1
  • Map Color 2
  • Map Color 3
  • Map Color 4
  • Map Color 5
  • Map Color 6
  • Map Color 7
  • Map Color 8
  • Map Color 9
  • Map Color 10


Gill Sans

Gills Sans is NOT websafe :(...

Map Colours

Aparently there has already been a study performed on which colors you should use on a Choropleth map. These schemes have already undergone extensive user phycological testing. Lucky for us the color we would want to use REGARDLESS actually matches the company brand colors almost EXACTLY - lucky us:

Project Resources:

  1. Leaflet JS: choropleth tutorial

    (truely the best resource for this project - period)

  2.'s awesome choropleth

    (from which we found leaflet)

  3. Texas Tribune US Senate Runoff Results map

    (perhaps the BEST model to go from)

  4. Mike Bostock's awesome choropleth example

    (when we all grow up and can be real designers, we might make something that is somewhat this cool)

  5. GitHub:world.geo.json

    Free, easily accessible geo-json geometry files for the world.

    For a good time, drag them to and paint the globe!


    These are geoJSON files holding all county geoJSON data in one file.

    The accompaning information with the geoJSON coordinates differs from what is available at world.geo.json. There is some difference in the labels used to reference the data. At least you have all of the coordinates all together in one file already. If you are looking for a more pure source of geoJSON data try GitHub:world.geo.json


    Psychology behind choosing your choropleth color scheme, and a tool to help you do it the right way.

Efforts Toward Success

Make a map appear, and execute events

Load information via: geoJSON

...and execute events on those elements added.

Display Counties in PA