Aisha Assignment 4 – Data Visualisation

Initially, I wanted to create some sort of data visualization surrounding the 2021/2022 season of the premier league. I ended up creating one showing the amount of points each team got that is indicated by the size of the circle allocated to them.

This is it:

 

However, I didn’t like the idea so I did more research as to what I could do for this assignment. I stumbled upon weidi youtube video on visualization  (https://www.youtube.com/watch?v=u-RiEAQsXlw&t=1536s) and decided to replicate her idea with my own data. I chose to display google trends of the football club Chelsea that occurred in the past 12 months. Through mouse pressed the user is able to switch between a circular graph to a bar graph each showing the trends.

This is the result:

The code I’m most proud of is the function to allow the graphs to switch.

//global variable
let graph = true;

// included in the draw function

if (graph) {
    CircularGraph();
  } else {
    BarGraph();
  }

  Button(buttonX, buttonY, buttonW, buttonH, "SWITCH GRAPH", 10);
}


function mousePressed() {
  if (dist(mouseX, mouseY, buttonX, buttonY) < 15) {
    graph = !graph;
  }
}

 

Improvements for the future:

• I’d like to create my own group bar graph from scratch
• I’d also like to use my own coding rather than rely on someone else (hopefully I manage this through practice)
• Include a cool background
• Include more data.