Assignment 4 – F1 2021 WDC Points Tally Data Visualization

Concept

I just recently got back into F1. I have a sporadic relationship with it, sometimes not watching at all, and then for 3-4 races straight, I’ll be checking out all the different reports about the new Ferrari engine or whatnot. But basically, my data visualization came out of wanting to show a graphic representation of the points table at the end of the 2021 F1 Season which what got me into it as the final race also happened in Abu Dhabi.

I decided to create a bar table that shows the points tally for Formula 1, while incorporating elements that represent the essence of the sport. I obtained the data for the drivers, teams, and points tally from a Wikipedia table, which I extracted into a CSV file using a free online web tool. I cleaned up the data as necessary. Additionally, I wanted to include the team colors and the cars used by the 10 teams in the 2021 season. To add a dynamic element, I incorporated a smoke effect, giving the impression that the cars are revving.

 

Highlight

Besides loading the images next to the tally bar, the highlight of my code was definitely the smoke effect which was relatively easy using a Smoke class and put the instances of the object through an array to display them as they widdle out and get removed.

// smoke class!
class Smoke {
  
    //Constructor will take 2 parameters: x and y position
    constructor (x ,y ) {
        this.x = x;
        this.y = y;
      
        //Smoke radius
        this.r = 3;
      
        //Smoke velocity (for some motion)
        this.vx = random(-3,-2); 
        this.vy = -1; //Up
        this.color = 190;
        this.alpha = 235;
    }
    show() {
        noStroke(); //No borders on smoke
        fill(this.color, this.alpha); //Fill Ellipses
        ellipse(this.x, this.y, this.r); //Create Ellipses
    }
    update() {
        //Move smokes
        this.x += this.vx;
        this.y += this.vy;
      
        //Make smoke disappear slowly
        this.alpha -= 15; 
      
        //Make smokes bigger
        if (this.r != 5) {
          this.r += 1;
        }
    }
    delete() {
        return (this.alpha <= 0); //If smoke disappears, return true and remove it from smokes array.
    }
}

 

Reflection

This project was enjoyable for me, as it involved analyzing fascinating data and reflecting on Ferrari’s unfortunate performance this season, which is disheartening as I am a supporter. However, it was still an exciting season overall, especially since the championship title was decided in the final race.

As an additional feature, I would like to include an initial loading screen where the cars start moving from the driver name area and stop at specific x distances corresponding to the driver’s points.