Heatmap of where I’ve been

Moved by Bobby Sudekum’s map and this Ask Metafilter question I drew a quick heatmap of all the places I’ve been in the past two years. Primary data source is OpenPaths, 6348 location points. Results in the gallery.

This slideshow requires JavaScript.

Doing this right is hard. OpenPaths samples non-uniformly in time, more points when you’re moving. So the honest thing would be to calculate dwell time from the timestamps. Also the heatmap fakery being done in TileMill is not really accurate, more of an alpha blending hack, but it does look nice. The result is not particularly scale-invariant, you need different settings for different zoom levels and different amounts of source data.

Here’s the steps I followed. Full Carto CSS below. These notes below aren’t a full cookbook, but if you sort of know TileMill already it may get you going.

  1. Get the right version of TileMill. This proved challenging; you need a dev build to get the special colorize-alpha image filter, but the absolute latest dev builds are broken. Version TileMill-v0.10.1-243-gafc00a ended up working for me.
  2. Download my data from OpenPaths in CSV format.
  3. Start up a TileMill project and import the OpenPaths data. Happily it detects the CSV and lat/long parameters with no trouble. Style it with simple dots and you have a map!
  4. Add some thematic layers for orientation; I used the Natural Earth data for country boundaries, state boundaries, and the small roads file (which is sadly US only). Put the locations dots as the top layer, then I put roads, admin1, and countries below.
  5. Switch to transparent markers. Grab the Mapnik fuzzy dot and drop it in my project directory, use that as a marker-file.
  6. Switch to the fancy heatmap. The magic there is mostly the image-filters:colorize-alpha. Also want to multiply markers, and allow overlap.
  7. Tweak the heatmap. Unfortunately there’s no scale-invariant way to do this, so I settled on making it look good at zoom=8. Both marker-width and marker-opacity are things you can tweak to make it look good depending on your density of location samples, zoom level, etc.

Here’s the full Carto CSS.

Map {
  background-color: #b8dee6;
}

#countries {
  line-color: black;
  line-width: 2;
  line-join: round;
  polygon-fill: #fff;
}

#10madmin1statesprovi {
  line-width: 0.5;
  line-color: #444;
  line-join: round;
}

#locations {
  marker-file:url(marker.png);
  marker-allow-overlap: true;
  comp-op: multiply;
  marker-width: 20px;
  marker-opacity: 0.5;
  image-filters:colorize-alpha(hsl(240,80%,50%), hsl(180,80%,50%), hsl(120,80%,50%), hsl(60,80%,50%), hsl(0,80%,50%));
}

#10mroads {
  line-width:0.5;
  line-color:#bbb;
  line-opacity: 0.8;
}

2 thoughts on “Heatmap of where I’ve been

Comments are closed.