Plotting Pretty Elevation Profiles with the Strava API

Update 13 July 2013: After the deprecation of the Strava API, this tool no longer works. However, an updated version of this segment gradient tool is now available here.

So this tool plots elevation profiles from Strava data. OK, so maybe the profiles aren’t amazingly pretty.  But I had fun making them look somewhat like the elevation profiles from a certain famous cycling event!

Lipscome + Nicholas climb

This little hacked-together piece of JavaScript will plot the elevation from a Strava segment (in metric units only, of course!) and uses the familiar green-blue-red-black styling to represent the severity of the gradient.

I wrote the code to fulfill a specific purpose: generating graphs for the Hobart 10,000 ride.  But I figured I’d make the code and tool available for anyone to use or fiddle with as they see fit.

This tool requires IE9, Firefox, Safari, Chrome or any other canvas-aware browser.  If you plug in bad data, you’ll get bad results.  So don’t.  All the parameters dynamically refresh the profile, except for the segment ID field, after which you’ll need to click Load Segment.

If you want to play with the source yourself, the only thing you need to do server-side is plug in the data from:

Go knock yourself out here:

Updated 15 Aug 2012: The tool now does isometric projection, which I think looks quite a lot nicer, and I’ve tidied up the user interface and added a few more controls.  As noted by Jonathan in the comments, it doesn’t do too well with downhill segments — the tool assumes it is an uphill segment at present. 

15 thoughts on “Plotting Pretty Elevation Profiles with the Strava API

  1. Looks very cool, but when I change the segment ID to e.g. 1797698 and try the load it – an empty message box is displayed. Tried in newest version of IE, FireFox and Chrome

  2. Thanks Jonathan 🙂 Yes, it doesn’t really handle negative gradients as it assumes the lowest point is the start of the segment and the highest point is the end. Could tweak… But will not do that for now 🙂

  3. Thanks Emilio. You can see it in use on now as well. Ben from Veloviewer has improved the code to support descents as well as climbs. If I ever have some free time, I have some plans for tweaks to the tool…

  4. Very nice tool Marc!
    Could you please explain how you perform the best fit gradient to identify segments with similar slope?

  5. The best fit gradient algorithm is a horribly hacked up implementation of a sliding window. It works by magic. I wrote the algorithm late at night (here in Australia) while watching the Tour de France, so I have no idea how it works…

    OK, roughly, for each data point (dataRise/dataLen) the following formula defines whether or not to finish the section:

    var cut = Math.abs( 1 – (sectionRise/sectionLen) / (dataRise/dataLen)) > 0.5 && (sectionLen + dataLen) * XScaleFactor > 32;

    So if the gradient factor changes by more than 0.5, and the section is at least 32 pixels wide, then cut. I told you it was magic.

    To be honest, there are real graphics algorithms, standard line fit or point removal algorithms, but this hack job was good enough for this project 🙂

  6. Unfortunately, this will not work any longer as Strava have retired their V1 and V2 APIs and have only granted access to their V3 APIs to a few people. Sorry all, hassle Strava if you think this sucks.

    1. That’s awesome work, thank you letting me know 🙂 Transforms are clever things and make graphics much simpler to work with once you have a good grasp of them. In the elevation profile code I have a transform and an inverse transform, to convert between screen and graph coordinates: from memory you want to be using the inverse transform to convert screen pixels to graph coordinates. or may help?

Leave a Reply

Your email address will not be published. Required fields are marked *