top of page
Land.jpg

F1 data Visualization

Expressing data as an interactive visualization in a fascinating way leads to learning or insights not usually attainable through primary data display, such as tables, charts, etc. To drive insights, designing with specific tasks in mind is helpful. In this project, we design a parallel coordinate visualization using F1 race data between the years 1950-2017.

Team

Duration

One month

Feature video

Prompt

Rich data can be used to narrate a story if visualized correctly.
F1 data has the depth and richness with which we try to achieve this narration using parallel coordinates. 

Data

We found F1 world championship data on the internet which we used in this project. The data available was between the years 1950 to 2017. While processing this data we first converted the available CSV files to JSON files using the papa parser. During this process, we noticed that some of the data were missing. After running multiple checks we identified the years from which the data was missing which we used to adjust the visualized range.

Prototyping

After processing the available data set we began to plan how the visualization should be structured. A prototype of the design of this visualization was sketched out to understand what elements were necessary to let the users move through the years and races.

1.png

Landing page with an animated button.

After clicking the button, a parallel coordinate is visible for the latest race year. A slider is added at the bottom of the page to help users slide through the years. The X-axis consists of all the races and the Y-axis consists of all the teams racing in the particular season.

2.jpg
3.jpg

When users are interested in a particular race, they can click the name or axis of one of the races which open the complete race with the drivers on the Y axis and the laps on the X axis. 

Implementation

From the prototype sketches, high-fidelity pages were implemented. The pages are explained below. 

11.JPG

A landing page with an animated button is implemented along with information about the team members below.

After clicking the button, a parallel coordinate is visible for the latest race year. The X-axis consists of all the races and the Y-axis consists of all the teams racing in the particular season. When a user hovers over a particular team's line, it highlights the line to make the visualized line more visible as seen in the picture.

13.jpg

Slider with the available years which can be moved to change the shown graph.  

15.jpg

When users are interested in a particular race, they can click the name or axis of one of the races which opens the complete race. When a user hovers over the race line, it is highlighted with an animation.

After a user clicks on this race line it opens detailed race data viz of the particular race. The X-axis contains all the laps of the race and the Y-axis of the drivers taking part in the race. The visualized line moves from left to right from 1st lap to the last one. As this visualized path moves through the laps it shows which particular position the driver is at in the particular lap.

14.jpg
14.jpg

While hovering over a particular driver's visualized path it gets highlighted and a tooltip pops open with the outcome of the driver for that race and the driver's team name.

As some of the race data is missing, an error handling page is shown if  the user chooses this missing race during their interaction

16.JPG

Usability study

  • A simple usability study was conducted with 3 naive users.

  • 2 users who follow the sport found the visualization rich and could tell the story behind each race and driver. Participants recalled particular races which they had watched and could recall particular battles between drivers by seeing a clutter of lines during a few laps. 

  • Users who had no prior knowledge of F1 understood the visualized data but did not seem to gather richer information from it.

Insights 

​The insights gathered by the users during the study are listed below.

  • Team/Driver Standing

  • Team/Driver Story

  • Driver Strategy 

  • Race/Championship Results 

  • Special Occurrences

11.JPG

Conclusion 

Through this visualization, we achieved story narration which was understood by fans of the sport. The insights gathered by users from the study show that the important aspects of a race could be understood clearly from the visualization. Future work on this project could result in visualizing the performance of each driver during a particular race, season, or lifetime and comparing them against other drivers.

bottom of page