A while back I mentioned on twitter, and the other day here on this blog about a pet project I was playing with, visualizing the running data gathered by my Garmin 305 GPS watch while on runs. Well, here’s what I’ve got so far, for a 5 mile run I did a couple of weeks ago:
Basically what I do is get the data of the Garmin device using the Garmin Training Center program that comes with the watch (updated via the web). Then I choose a workout and export it as a TCX file. This is a plain xml file with overall information about the run, and a whole bunch of track points. A single track point looks like this:
<trackpoint> <time>2009-12-26T12:44:43Z</time> <position> <latitudeDegrees>42.3235355</latitudeDegrees> <longitudeDegrees>-71.2537218</longitudeDegrees> </position> <altitudeMeters>40.5128174</altitudeMeters> <distanceMeters>8.9054995</distanceMeters> <heartRateBpm xsi:type="HeartRateInBeatsPerMinute_t"> <value>96</value> </heartRateBpm> <sensorState>Absent</sensorState> </trackpoint>
As you can see, that’s pretty easy to parse. You get latitude and longitude, plus altitude, so there’s three dimensions. Here, I am showing my heart rate with the thickness of the line drawn. All you get for each track point is the distance traveled so far, but by subtracting that from the previous track point, and dividing by the time between the two, you can get the speed at any one point. This is shown by the color of the line. Red is fastest.
The map is from Open Street Maps. Using the max and min latitude and longitude, I can get a bounding box for my run, and request a map of that area as a png from that service. Load it up and rotate it around in 3D with the trail, and we’re in business. Actually, for this demo, I’ve saved out the map as a file on my own server and am loading that in. Otherwise, I’d need to proxy the map service to be able to load images from it. It works fine dynamically on the local version. Actually, I need to do a lot more tweaking on aligning and scaling the map to the trail. This example isn’t too bad, but there’s a bit of hacking around going on and it’s still not perfect. But not bad for a first try.
The whole project is less than 200 lines of timeline code in Flash CS4 (take that you elitist framework junkies!) but I’ll eventually clean it up and turn it into some classes that will be worthy of being seen by eyes other than my own.