Interactive Data Visualization for the Web, 2nd Edition

Chapter 14. Geomapping

Bar charts, scatterplots, ring charts, and even force-directed graphs…Yeah, that’s all okay, you’re thinking, but get to the maps already!

JSON, Meet GeoJSON

We already met JSON, briefly, back in Chapters 3 and 5. Now meet GeoJSON, the JSON-based standard for encoding geodata for web applications. GeoJSON actually is not a totally different format, but just a very specific use of JSON.

Before you can generate a geographic map, you need to acquire the path data (the outlines) for the shapes you want to display. We’ll start with a common example, mapping US state boundaries. I’ve included a file us-states.json with the sample code. This file is taken directly from one of the D3 examples, and we owe Mike Bostock a word of thanks for generating this nice, clean file of state boundaries.

Opening us-states.json, you’ll see it looks something like this (reformatted and greatly abbreviated here):

{
  "type": "FeatureCollection",
  "features": [
     {
       "type": "Feature",
       "id": "01",
       "properties": { "name": "Alabama" },
       "geometry": {
         "type": "Polygon",
         "coordinates": [[[-87.359296,35.00118],
           [-85.606675,34.984749],[-85.431413,34.124869],
           [-85.184951,32.859696],[-85.069935,32.580372],
           [-84.960397,32.421541],[-85.004212,32.322956],
           [-84.889196,32.262709],[-85.058981,32.13674] …
          ]]
      }
    },
    {
         "type": "Feature",
         "id": "02",
         "properties": { "name": "Alaska" },
         "geometry": {
           "type": "MultiPolygon",
           "coordinates": [[[[-131.602021,55.117982],
             [-131.569159,55.28229],[-131.355558,55.183705 ...