Stand Back! This Graph Is Alive!

This was just too cool for me not to put up on the site, even though I’m not completely happy with it. The data are fairly simple: add up the sprint and mountain points across all riders on a Tour de France team for each stage. So for each stage, each team gets the ordered pair (mountain points, sprint points) where the points are cumulative.

The cool part is that I’ve managed to get it animated, so you can watch the team’s progress through the Tour. The bad news is that the animation tools I’m using are apparently limited to pushing dots around a graph. Otherwise I’d actually plot the team names and animate them. As it is, you’ll have to wait for the animation to end and then mouse over the dots to get the team name. (Unless you have stupendous hand-eye coordination and can hold your cursor in the same spot on a dot for several seconds while it glides around.)

Another hiccup is that you’ll notice sometimes the dots move down or left, which would indicate that a team lost points that stage. Actually what’s happening is that team lost a rider, who either quit or was disqualified. I’m going to treat those as “lost” points unless some cycling expert instructs me otherwise.

This should work in Chrome, Firefox and Safari. But consider it experimental. Reloading the page should restart the animation. Ok, I confirmed that this won’t work in Firefox, and that the one SVG plugin for Firefox has been discontinued by Adobe (although apparently it relied on ActiveX, so maybe that’s a good thing). So Chrome, Safari and probably Opera are your only options.

The truly glorious part (to me) is how little code this required. There’s a little bit of work shuffling the data into the right format, but once that’s done this is all I needed to do in R:

doc <- svgPlot(plot(sprint~mountain,D1,xlab="Mountain",ylab="Sprint",xlim=c(0,300),ylim=c(0,350),pch=20))
addToolTips(doc,levels(pts_merge$team),addArea=2)
animate(doc,data=D,which=D$stage2,dropFirst = TRUE,begin=0,interval=3,labels = levels(pts_merge$stage))
saveXML(doc,"tdf_animation1.svg")

Sweet!

Related posts:

  1. Performance vs Age Redux: Grover’s Graph
  2. Tour de France Bump Charts (Updated)
  3. Tour de France Bumps Chart: Stage 14
  4. Tour de France Team-Nationality Guide
  5. Week In Review: Friday July 16th

About Joran

Comments

5 Responses to “Stand Back! This Graph Is Alive!”
  1. pheski says:

    Works great in Safari, but no animation with FF 3.6.6

Trackbacks

Check out what others are saying about this post...
  1. […] Take that vector graphics animation! For an explanation, see my previous effort. […]

  2. […] totally pwned scalable vector graphics.  (The animations will not work in IE or Firefox, as far as I […]

  3. […] my glorious successes yesterday getting some basic scatterplot animations going (Firefox doesn’t do animation with SVG, you’ll have to use Safari, Chrome or […]



Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!