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: http://www.strava.com/api/v1/stream/segments/segmentid
Go knock yourself out here: http://hobart10000.com/segment-gradient.php
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.
This comment has been removed by the author.
Very nice! (I posted preceding comment prematurely: you’d already implemented what I was suggesting there).
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
Thanks Dan 🙂
Henrik, thanks for catching that… I switched off the Access-Control-Allow-Origin header on the AJAX data script before I went to bed, and look where it got me!
Try these examples now:
http://www.hobart10000.com/segment-gradient.php?SegmentID=1797698&f=3.8&xStep=100&yStep=10&FitGradient=true&Angle=10
http://www.hobart10000.com/segment-gradient.php?SegmentID=644707&f=0.5&xStep=1000&yStep=50&FitGradient=true&Angle=10
Great tool, Marc! Minor glitch: it seems to choke a little bit on segments with negative gradients, like http://www.hobart10000.com/segment-gradient.php?SegmentID=700777.
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 🙂
This is an awesome tool Marc, congratulations. Hope it will be always accessible for the rest of us.
Thanks Emilio. You can see it in use on Veloviewer.com 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…
Very nice tool Marc!
Could you please explain how you perform the best fit gradient to identify segments with similar slope?
Thanks,
Stefano
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 🙂
The next version of this algorithm is now online at https://marc.durdin.net/2013/09/giro-your-strava-now-does-strava-routes-as-well/ — do whole-ride elevation profiles, directly in your Strava ride page!
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.
Hello Marc,
I have implemented your beautiful code for elevation profile.
Look here :
http://screencast-o-matic.com/watch/cDhQIY18H4
But I have some problem with coordinates for my cursor in another canvas and context .. I don’t really understand correctly transform matrix.
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.
http://www.mathplanet.com/education/geometry/transformations/transformation-using-matrices or https://www.khanacademy.org/math/precalculus/precalc-matrices/matrices-as-transformations/v/transforming-position-vector may help?