RaceFans site development

New: Visual gaps for practice sessions

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #299362

    For a while I’ve wanted to add a feature to the practice reports which illustrates the gaps between each drivers in a graphical way. I hopied this might make it easier to digest the outcome of each session at a glance.

    My first attempt at doing this is now ready for introduction and will be used for the first, second and third practice session reports this weekend. As a test I’ve updated the Monaco Grand Prix session reports to include the graphic, and as always I’d be interested to get your feedback:


    As you can see it’s a fairly straightforward graphic. I have ideas for more sophisticated uses in future but do suggest any you have below.


    I really like it, adds to the visual experience.

    I would recommend possibly putting the lines in the drivers teams colour (eg. Red for Ferrari) to help distinguish- although looking on an iPad hurts this for me.

    All round great feature- thus making a great site even better!

    Mad Eric

    Great! Easy and very quick to evaluate the gaps. I really like the calculated time gap as you move the cursor over each driver.
    I would suggest you display Time followed by Driver Name. Possibly add list of teams and highlight times/names when user selects a team (using color for this would be just too much.) Possibly display Time – Driver Name – Team Name, OR Time – Driver Numb/Driver FIA abbreviation – Team FIA abbreviation.
    After re-reading the above, I would prefer the Last suggestion (Time – Driver Numb/Driver FIA abbreviation – Team FIA abbreviation.)
    This could also be a great improvement to the qualy and final grid reports where I would use Vertical access for final grid position and Horizontal for actual best official lap time making loss of position time penalty very obvious, especially with all the expected PU change penalties.


    Thanks for the feedback guys. I like the idea of distinguishing each team, I’ll see what I can do with the code @spaceman1861 has provided.


    Instead of using text, can you replace the point on the line with a mini F1 car icon, red for ferrari, purple for RBR, grey for the rest of the field and then mouse over to find out who it is & their time on a “on hover” event?

    EDIT: or even driver helmet icons would be good :)


    Perhaps just use the same colors for the vertical lines as you use in the graphs on other topics.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.