The concept:
For this project I decided early on that I wanted to do something related to Formula 1 racing, because I have been so interested in racing and race cars since I was very young. I went on Kaggle.com and found so many F1 datasets. I couldn’t decide what to do with them though. I initially wanted to do a visualization of the lap times over time (1950-2023), but the trends weren’t very interesting so I decided to focus on where the drivers are from instead. The whole concept of my project is to show you a visual representation of the countries F1 drivers are from. When you first run my program, you get a screen of two F1 cars racing towards the finish line, each round they have varying speeds though. When you click on the screen, you see the main screen where a map is displayed with red pins on the countries where F1 drivers are from. When you hover over a pin, it displays the country name and the total number of drivers who have raced in F1 from this country over the years.
A highlight I’m proud of:
One thing I am really proud of is how I got the pins to work in a way so that when they are hovered, the stats are shown above. I used OOP to define the stats class which displays both the pin on the country (I had to create a csv file with the exact locations manually though) and the text displayed when the pin is hovered over.
class stats { //pins placed on the countries' location and stats displayed
constructor(countryCode, x, y, countryCount) {
this.countryCode = countryCode;
this.x = x;
this.y = y;
this.diameter = 3; // Initial circle diameter
this.isHovered = false; //boolean variable to know whether the pin is hovered or not
this.hoveredDiameter = 20;//diameter of the circle when hovered on
this.countryCount = countryCount;
}
display() {
noStroke();
fill(255, 0, 0);
ellipse(this.x, this.y, this.isHovered ? this.hoveredDiameter : this.diameter); // Adjust size when hovered accordingly
if (this.isHovered) {//display the stats above when pin is hovered
fill(220);
textSize(22);
textAlign(CENTER, CENTER);
text(str(this.countryCount), width - 70 , 15);
text(str(this.countryCode),width/2 - 50 , 15)
}
}
checkMouseHover() {
// Calculate the distance between mouse and pin center
let distance = dist(mouseX, mouseY, this.x, this.y);
// Check if the mouse is within 2 pts of the pin
this.isHovered = distance < (this.diameter / 2) + 2;
}
}
Reflection and ideas for future work or improvements:
I really enjoyed working on this project because it allowed me to explore new concepts and challenge myself to make it as close to what I had in mind as possible. One thing I really wanted to do though, but I couldn’t get the hang of was to create a smooth transition between the opening screen and the main screen. What I had in mind was to code it so that it would show the opening screen first and when the cars cross the finish line, there would be confetti all over the screen and transition into the main screen, where users can hover over the pins and display the country stats. This is the one extra thing I would’ve loved to include in my code.
References:
Car and Map clipart: https://www.clipartmax.com/