Plotting Strava data with Plot.ly and Javascript

It was a rough year cycling for me as I had a few injuries that kept me off the bike and kept me out of races. Now it’s late fall and the air quality in Utah makes it impossible for me to bike without getting even more sick than I already am. That being said, I am a heavy user of Strava. I use it to log all of my rides and connect with HealthKit on my iPhone. The default graphs in both Strava and Healthkit leave a lot to be desired and I decided I would try to create a better time series graph than what Strava has to offer.

Lucky for me some of the heavy lifting is already done. This Node library helped reduce boilerplate code I needed to write to handle Oauth with Strava. From there, I just handled all of the data transformations and created a Plot.ly line chart.

Two interesting notes. (1) The Strava API returns rides in meters instead of miles, yet I couldn’t find a Javascript library that would do distance conversions for me. I guess that’s something I can work on. (2) I was definitely scared to push myself very much after an early year of injuries. When I rode I wouldn’t ride more than about 23 miles.

There are obviously more interesting things you can do with this data. The Strava API returns extremely rich data. I’ll look at more interesting visualization in the future.

---

Code: