Funky new interactive race charts

Posted on

| Written by

Here’s a new feature on the site which you should be seeing more of in the future.

I’ve had some great feedback on the post-race analysis charts including one suggestion from Nick Someone on how we could make them more interactive and useful.

Here’s my first attempt at implementing it. The graph below is the race chart for the Malaysian Grand Prix, showing how far away from the leader each car was on each lap.

You can hover over the lines to get the full data for each lap. You can also toggle different lines on and off and if you switch off the lines for the slowest cars the vertical axis shrinks so you can see the leaders’ progress in greater detail:

You need to upgrade your Flash Player

I plan to have a more polished version of the charts ready for the Chinese Grand Prix analysis features, including a full-screen version.

If you have any thoughts on how else I could improve this feature, let me know in the comments. Thanks again to Nick for the idea and also to Rich for helping me with the Javascript.

Author information

Keith Collantine
Lifelong motor sport fan Keith set up RaceFans in 2005 - when it was originally called F1 Fanatic. Having previously worked as a motoring...

Got a potential story, tip or enquiry? Find out more about RaceFans and contact us here.

77 comments on “Funky new interactive race charts”

  1. WOW! That’s really slick and very useful for comparing drivers! Great job Keith!

    1. i think ‘wow’ was the first word that came to mind for me. that’s just awesome keith.

    2. Syc! That’s pretty badacular Keith! I was with the other few dummies that had a hard time with the squares and triangles system so this is really great!

      1. Very nice! Thank you! If I had to suggest one change, it would be that we all could manipulate the axes. For example, I could shorten the length between 100 & 200 seconds, and lengthen the length between 1 and 20 seconds.

  2. Cool !!! every day this site gets better and better

    Cheers

  3. Me likey, can see myself staring at these charts for hours after the race!

  4. Seriously amazing. It really is interesting to be able to compare times like this.

  5. Great job Keith, although would it be possible to either use a different colour for team mates or perhaps make one line thicker than the other. At the moment if you want to compare team mates, its hard to do so because the lines are identical and its hard to tell them apart.

    1. What about a dashed line and a solid line of the same color for each team to separate the teammates?

      1. Yes, despite the first thing one can say is Excellent!, would be great if you can find a solution for the colors of team mates.

        ………………. Driver 1

        ____________ Driver 2

  6. Yes, I agree. It’s tough telling teammates apart.

  7. This is really good.

    You can click and drag over a time period and it zooms on that area too.

  8. Hey this is pretty cool, I think it’ll be good to be able to zoom into areas that seem a bit tight.

    Will compliment nicely with this other tool I’m sure some of you have already heard about: http://www.visionf1.com/

    I love watching it in a faster speed to see how the concertina effect works with traffic etc.

    1. It’s not very realistic though. The dots of the drivers just move based on their lap times, but they should by some GPS tracking system…

  9. oops sorry, just figured out the zoom in bit! my bad!

  10. very very COOL Keith!! :D Superb!

  11. Absolutely fantastic Keith. I hope this website makes you a very rich man ;-) You deserve it for all your effort and the wonderful service you provide us fans.

    My thoughts… I agree with the comments about different colours for teammates.

    I also think it’d be great to have a ‘clear all’ and ‘select all’ option for the drivers so if I wanted to compare two drivers i don’t have to uncheck 22 times!

    Cheers, and keep up the exceptional work!

    1. Ace, I was going to say the same thing about the “select all” and the “un-select all” feature.

      I think the teammates should be the same color with a dotted line and a solid line.

  12. Awesome stuff, well is there anything left in your bag?

  13. very very COOL, Keith… :D Superb…

  14. Very nice! Congrats!!

  15. It may just be me, but I cannot see the majority of the graph or driver names. It’s odd because I only have this problem when I’m browsing using Firefox, but Google Chrome doesn’t have this issue. I found this was a minor issue also with the non-youtube videos on this site.

    Do any other Firefox users have this problem?

    1. No problems for me with Firefox. Maybe try updating/reinstalling Flash?

      1. No trouble for me in firefox.

    2. No Firefox problems and no Safari problems also. (Mac user)

  16. very useful. compare ROS and VET and we see that ROS never really put any pressure on him at all…

  17. You are a god! , my comp internet connection combination means I have some lag, but they are still useable…

  18. José Baudaier
    9th April 2010, 4:47

    Very nice indeed, hope next race all chart have this feature.

  19. Very cool; how about you flip the chart around the horiztonal axis, so that the leading driver is the top line?

  20. This is a fantastic service!

  21. Keith ‘Chart Master’ Collantine

  22. Fantastic work. Two suggestions though.

    1) As some have mentioned above, it is difficult to tell team-mates apart. Maybe a pointed line for one of them?

    2) It is rather annoying to switch 22 cars off when we just want to compare two team-mates (or 2 random drivers, for that matter). It’d be super useful if we had “switch everyone on/off” button at the bottom of the graph.

  23. Way to ruin the graph scale, Heikki!

    Other than that, another lovely addition to the site!

    1. Ah but you see, you can switch him off now!

  24. Hmmm this makes me curious. Don’t have flash at work so have to wait till I get home to see this.

  25. Dang! Fan-tas-tic.

  26. thats very cool….brilliant

  27. When comparing teammates you can hold mouse cursor over one of the driver’s name, making them easily distinguishable.
    Awesome feature on a aweome site, now we need some impartiality in the articles…

    1. “You can please some of the people all of the time, you can please all of the people some of the time, but you can’t please all of the people all of the time.”
      John Lydgate

    2. There’s plenty of impartial coverage elsewhere if that’s what you’re after. I like the fact that you get a feeling for Keith’s personal views through the site; it adds to the appeal (in my view!).

      And the charts are indeed awesome!

  28. The graphic is great. I have a suggestion though: Instead of comparing each driver to the leader, it’s better to compare *all* drivers to a ‘virtual’ driver. Imagine this virtual driver as one that completes the race in the exact same time as the race winner, but with all the lap times equal.
    I regularly build an excel file with these kind of graphics, and by comparing all drivers with this ‘virtual’ driver, we can see in the graph not only the differences between drivers but also the pace throughout the race.

    1. I do already offer that in the post-race analysis articles:

      How Hamilton and Massa raced to the front (Malaysian Grand Prix analysis) (second chart from bottom)

      However for every one person who finds it more intuitive there tend to be ten who find it confusing.

      I may do an interactive version of it but I have to be honest and say it’s not top of my priorities.

  29. A great addition to the race analyse, they defiantly live up to their name of ‘funky new interactive charts’.

  30. The idea looks brilliant but you might want to look into how it’s displayed on smaller screens.
    This is how it looks on my 9″ netbook
    http://img149.imageshack.us/img149/4066/f1f1anaticchart.png
    :s

    1. Which browser is that?

      1. Ah yes, it’s in Firefox 3.5.3!

        1. I’m struggling to re-create the problem. What screen resolution?

          1. Screen resolution is 1024×600

            Sorry Keith, I haven’t got another browser on the netbook to check.

            Let me know if you need any more details.

    2. all you have to do is zoom out on firefox to make the graph fit.
      (VIEW—>ZOOM—>zoom out) or Ctrl+ –

  31. Cool stuff! Love it.

    Just 1 more suggestion, right now I have to manually turn off every driver’s line in order to compare just 1 driver with the race leader. It would be good to have a button to turn off the entire grid on and off.

  32. Just fantastic!!!

    It is my first post but definitely if I have to post once this is a very good chance to do it.

    Keith I really much appreciate your effort with this web page for being so imaginative. Great info and entertainment.

    Cheers from just another F1 fanatic.

    1. You’re welcome :-) and thanks to everyone else for the encouragement.

      1. if only Bernie would listen to the suggestions on this site as much as you do to your readers…

        great stuff Keith!

  33. More and more graph and stats and everything on this site, I don’t think I’ll have to pay for FORIX anymore!

  34. That is pretty cool!!! I like it alot!

  35. That is brilliant.

    You’re a talented man Keith. Brtilliant work.

  36. This is future of GP analysis :) Thx Keith

  37. Younger Hamilton
    9th April 2010, 12:11

    Fantastic Work Keith and whoever came up with that idea,This is the Future GP Analysis for sure and i just recently looked at how far Lewis was from the leading red bulls and it tells which lap he pitted on and how close and far he was from and on the leaders

  38. This is just awesome…

  39. Keith, this is awesome! There’s always going to be a ‘Heikki’ that screws up the scale, so maybe a break in increments would help that?

    Your statistics, graphs, and analysis make this site my #1!

    1. Thanks LeRoy – Click on Kovalainen’s name to turn off the line and the scale changes automatically.

      1. Too easy… great stuff!!

  40. I like the concept! It gets a bit messy though with all of the drivers showing as default. How about starting with the top 10 drivers toggled on, and the rest toggled off?. It might make it a little clearer. In terms of workload – why not use Ergast’s excellent F1 API to update the charts for you? Less work!!! http://ergast.com

  41. EPIC WIN HERE!…

    superb Keith!

    1. maybe you could start with only the top 10 toggled on tho?…

  42. Keith, this freaking rocks.

  43. Keith, that’s just great. A deselect all (as suggest already) would be nice, but other than that it’s great.

    Maybe it’s a bit hard to detect which driver is which. Can the lines be made clickable like in the lap charts on formula.com live timing?

    Personally I like the “average laptime” charts better, but they can be more difficult to read too. Especially with the dropping lap times.

    I was experimenting with an “adaptive median laptime” chart myself. I scale the laptimes towards a smoothed median laptime for each lap of the race. That way you can see who’s faster than the current pace at the moment. That should overcome dropping laptimes, safetycar situations, lap time changes due to rain and such.

  44. keep it up mate it’s great

  45. Wow! Absolutely brilliant.

  46. That’s a great feature – what it’s good at showing is how important tyres really are this year. Button said after the race that he couldn’t find a balance on the soft tyre, and you can really see that on the graph as his times dropped off compared to the other cars that later in the race he was pretty much matching on pace. I think Phil Prue said before the season began that Lewis and Jenson have totally different tyre wear patterns but that one isn’t necessarily kinder on the tyres than the other. Button apparently puts a lot of lateral load on the tyre due to the speed he carries into the corners, and perhaps that’s why on the softer tyres and the inters, he is scrubbing them to bits – the soft compound is apparently softer this year than last year. However, his race was lost mainly because of his longer pitstop than Hamilton and his failure to make headway when he had fresh rubber on the primes at the start of the race.

    Last time the early pitstop made his race, this time it killed it. All from a graph! I feel like a race engineer!

  47. Ahh, there’s the other problem: “you need to update your Flash Player”, but I’m on an iPhone, so I can’t. At least I’m never very far from a PC.

  48. how do i get the chart on full screen?

  49. i have been following the site for a few months now. i have to say Keith, your dedication is fantastic. i love that so much passion goes into the site. keep it up!

  50. Wow that’s just fantastic!! Great new feature, funky indeed, thanks!

  51. great stuff, cool beans…

  52. Primo de Anónimo
    12th April 2010, 19:03

    Dear Sir,
    The interactive chart is additive, more than the PS3

  53. It took me a few seconds to understand what it does, but it is great for comparing drivers. A tool for the fanatic!

    You just keep improving the site. I really like the guest writers articles as well.

    Looking forward to the next GP.

Comments are closed.