Visualizing my runs with a heatmap
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:
- Garmin Connect sends the run to Strava.
- Strava notifies IFTTT that I've completed a run.
- IFTTT asks Netlify to rebuild and deploy this static site.
- 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:
- Data visualization is hard! I spent over 70% of the time learning how to work with VX. There's a lot of code needed to format the Strava API response so that it works with VX.
- Even after a month I still find it incredibly satisfying to see the site automatically rebuild when I finish a run.
- Webhooks, combined with IFTTT, are very powerful.
- I set up IFTTT to rebuild the site every Sunday. This ensures that the current week always appears in the heatmap.
- I'd love to build similar projects with other services. Todoist next?
- Building a basic Gatsby source plugin was easier than expected. I'd recommend reading through the source code if interested.
Working on a similar project? I'd love to hear about it.