Assignment 4 – Data Visualization

Concept

For this assignment, I drew inspiration from one of the previous students works where they used the 2018 world cup data to create a graph. As a passionate football enthusiast, with football being my favorite sport, and considering that the FIFA world cup is the biggest sports tournament in the world, I decided to collect the data on the total number of goals scored in every World Cup tournament from 1930 to 2022. My goal is to present this data in the form of a bar graph, visually depicting the historical trends and patterns of goals scored across different tournaments.

A highlight of some code that you’re particularly proud of

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Inserting bars
for (let i = 0; i < data.length; i++) {
let year = data[i].getNum('YEAR');
let goals = data[i].getNum('GOALS');
let x = map(year, 1930, 2022, margin+20, width - margin); // mapping the Year
let y = map(goals, 0, maxGoals, height - margin, margin); // mapping the number of goals
let barWidth = w / data.length;
fill('#E8B6B6'); //color of the bars
rect(x - barWidth / 2, y, barWidth, height - margin - y); //draws the bar
fill('#100D0D'); //color of the texts
text(goals, x+6, y -10); //writes the number of goals
}
// Inserting bars for (let i = 0; i < data.length; i++) { let year = data[i].getNum('YEAR'); let goals = data[i].getNum('GOALS'); let x = map(year, 1930, 2022, margin+20, width - margin); // mapping the Year let y = map(goals, 0, maxGoals, height - margin, margin); // mapping the number of goals let barWidth = w / data.length; fill('#E8B6B6'); //color of the bars rect(x - barWidth / 2, y, barWidth, height - margin - y); //draws the bar fill('#100D0D'); //color of the texts text(goals, x+6, y -10); //writes the number of goals }
// Inserting bars
    for (let i = 0; i < data.length; i++) {
    let year = data[i].getNum('YEAR');
    let goals = data[i].getNum('GOALS');
    let x = map(year, 1930, 2022, margin+20, width - margin); // mapping the Year
    let y = map(goals, 0, maxGoals, height - margin, margin); // mapping the number of goals
    let barWidth = w / data.length;
      
      
    fill('#E8B6B6'); //color of the bars
    rect(x - barWidth / 2, y, barWidth, height - margin - y); //draws the bar

    fill('#100D0D'); //color of the texts
    text(goals, x+6, y -10); //writes the number of goals
  }

 

Embedded SketchReflection and ideas for future work or improvements

For future improvements, I would like to add various patterns into the bars of the graph and additionally, I plan to implement interactivity, allowing users to click on individual bars to reveal which country achieved the highest goal count in each respective tournament.

Leave a Reply