Daniel O’Connor

Visualizing my runs with a heatmap

Screenshot of a heatmap visualizing my runs for the past nine months

Last month I added a heatmap to danoc.me that shows how much little I've run in the past nine months. The project, which started off as an excuse to play with with new JavaScript libraries, has actually helped motivate me to run more consistently.

Update (Feb. 2019): The implementation has since been updated to use CSS grid instead of VX, a charting library for React. I've found that the CSS grid implementation is much smaller and simpler to understand.

How it works

My Garmin GPS watch sends data to Garmin Connect when I finish a run. This triggers a series of events:

  1. Garmin Connect sends the run to Strava.
  2. Strava notifies IFTTT that I've completed a run.
  3. IFTTT asks Netlify to rebuild and deploy this static site.
  4. Netlify grabs this site's code from GitHub and runs gatsby build. This command includes an API request to Strava, fetching nine months of running data.

This site is built with Gatsby, a "blazing-fast static site generator for React." Gatsby biggest strength, in my opinion, is that it allows you to pull content from any source.

The blog posts on this site, for example, are stored as Markdown files. I load these files with the gatsby-source-filesystem plugin. If I wanted to, I could write the posts in WordPress's CMS and use gatsby-source-wordpress to load them into Gatsby.

Gatsby's plugin library includes hundreds of plugins. It did not, however, have one for Strava so I built gatsby-source-strava-activities. This plugin makes API calls to Strava's /athlete/activities endpoint and stores each activity as a "node" in Gatsby.

The homepage JSX file fetches the Strava nodes, formats the data, then sends it to a Heatmap component. Finally, the Heatmap component uses VX, a visualization library for React, to render the heatmap.

Thoughts and feelings

This was one of my first "weekend projects" in a while. Here's a brain-dump on how it went:

Working on a similar project? I'd love to hear about it.