Week 4 – Data Visualization

Week 4: Data Visualization

Description:

This project consisted of creating a data visualization for some kind of data.

Idea:

For this assignment, I wanted to create some kind of visualization involving soccer. I really enjoy watching soccer and one of my favorite tournaments is the World Cup. Therefore I decided to do some research on the latest World Cup in Russia 2018. I initially liked the data involving goals for each country so I decided to collect such data on the official FIFA webpage. 

Challenges:

For this project, there was no major challenge for me. The only difficult process was collecting data and working with CSV files. One major example was when I was using colors. I had to manually put every single piece of data. Initially, I thought I could write the colors in RGB in one single cell. However, Processing failed to read the data as colors. Finally, I had to write every single RGB value in a separate cell. For the piechart, I tried to make it interactive by making it bigger once clicked and making it display the names of the players. Although I tried to use the rotate function and textAlign function, I failed to get the outcome I wanted.

Process: 

For this project, I first started collecting data. I used the official FIFA website to collect data such as matches played, goals scored, goals against, own goals, and penalty goals. After collecting such data I used Microsoft excel to write each country’s name and data. I tried different designs and positions until I liked the last one where I place all of the data at the bottom of the screen and show it in bar graphs. When I completed this, I decided to put some color. For the overall design, I used the official colors used in the Russia World Cup. Then I got the idea to represent each country’s uniform color along with the name. After being done with this, I realized that the screen looked somewhat empty. Later I decided to add two additional features. The first one was a pie chart involving the top thirteen goal scorers. The second one involved the number of World Cup wins by country. 

Conclusion:

Overall I had a lot of fun creating this project because it involved something I liked. Although it was tedious to work with a lot of data I think I got to practice a lot for this project. I used previous topics such as OOP and using text. Even though I failed to complete the part for the text, I was satisfied with the result. The project looks a little empty but I think I will keep working on it to fill it and make it more interactive. Although the project took me more time than expected, I feel I enjoyed investigating and creating this data visualization. Also compared to other projects, I think I have improved a lot in avoiding hardcoding.

Country[] countries;
PieChart[] players;
Winners[] winner;

PFont font;
Table table, table2, table3;
color red = color(211, 2, 8);
color gold = color(229, 198, 133);
color white = color(245, 238, 213);
color black = color(23,23,0);
color blue = color(1, 83, 134);
color blue2 = color(0, 116, 177);
int zoomindata = 0;

color[] colors= { red, gold, blue, black, blue2 };
String[] countryname = { "BRA", "GER", "ITA", "ARG", "FRA", "URU", "ENG", "ESP"};

void setup(){
 size(1400, 720); 
 loadData();
}

void draw(){
  font = createFont("Montserrat", 40);
  background(245, 238, 213);
  textSize(64);
  fill(153, 0, 0);
  rect(0,0,width, 80);
  rect(0,height-30,width, 30);
  fill(255);
  textAlign(CENTER);
  textFont(font);
  text("FIFA WORLD CUP RUSSIA 2018", width/2, 55);
  
  for(int i = 1; i < 33; i++){
    countries[i].drawData();
  }
  for(int i = 0; i < 14; i++){
    if(zoomindata == 0){
      players[i].drawData();
    }
    else if(zoomindata == 1){
      players[i].drawBigCircle();
    }
  }
   
  for(int i = 0; i < 8; i++){
    winner[i].drawData();
  }
}

 void loadData(){
    
    //array for bottom data
    table = loadTable("worldcup2018.csv");
    //array for piechart
    table2 = loadTable("piechart.csv");
    //array for winners
    table3 = loadTable("line_chart.csv");
    
    countries = new Country[table.getRowCount()];
    players = new PieChart[table2.getRowCount()];
    winner = new Winners[table3.getRowCount()];
    
    for (int i = 0;  i < table.getRowCount(); i++){
      TableRow row = table.getRow(i);
      String name = row.getString(0);
      float matchplay = row.getFloat(1);
      float goalfor = row.getFloat(2);
      float goalscore = row.getFloat(3);
      float goalagainst = row.getFloat(4);
      float pkgoal = row.getFloat(5);
      float owngoal = row.getFloat(6);
      int r1 = row.getInt(7);
      int g1 = row.getInt(8);
      int b1 = row.getInt(9);
      int r2 = row.getInt(10);
      int g2 = row.getInt(11);
      int b2 = row.getInt(12);
      color c1 = color(r1, g1, b1);
      color c2 = color(r2, g2, b2);
      countries[i] = new Country(41*i, name, matchplay, goalfor, goalscore, goalagainst, pkgoal, owngoal, c1, c2);
    }
    
    for (int i = 0; i < table2.getRowCount(); i++){
      TableRow row2 = table2.getRow(i);
      String player = row2.getString(0);
      float goal = row2.getFloat(1); 
      int colornum = i%5;
      float anglei = row2.getFloat(4);
      float anglef = row2.getFloat(3);
      players[i] = new PieChart(player, goal, colors[colornum], anglei*TWO_PI, anglef*TWO_PI);
    }
    
    for (int i = 0; i < table3.getRowCount(); i++){
      TableRow row3 = table3.getRow(i);
      //String country = row3.getString(0);
      float wins = row3.getFloat(1); 
      int colorbar = i%5;
      winner[i] = new Winners(i, countryname[i], wins, colors[colorbar]);
    }
    
 }

 void mousePressed(){
   if(mouseX > 1000 && mouseY < 500){
       zoomindata = 1;
   }
  }
  
 void mouseReleased(){
   zoomindata = 0;
   
 }
 

class Country{
  float posX, posY;
  String name;
  color color1, color2;
  float MP, GF, GS, GA, PG, OG;
  float spacebtwy, spacebtwx, widthbar, barheight;
  
  Country(float x, String n, float matches, float goalf, float goals, float goala, 
  float pkgoal, float owng, color c1, color c2){
    posX = x;
    posY = height - 50;
    spacebtwy = 5;
    spacebtwx = 5;
    name = n;
    MP = matches;
    GF = goalf;
    GS = goals;
    GA = goala;
    PG = pkgoal;
    OG = owng;
    widthbar = 5;
    color1 = c1;
    color2 = c2;
    barheight = 15;
  }
  
  void drawData(){
    textSize(16);
    noStroke();
    fill(255);
    text(name, posX+20, posY+40);
    fill(red);
    rect(posX+spacebtwx, posY-MP*barheight, widthbar, MP*barheight);
    fill(gold);
    rect(posX+2*spacebtwx, posY-GF*barheight, widthbar, GF*barheight);
    fill(blue);
    rect(posX+3*spacebtwx, posY-GS*barheight, widthbar, GS*barheight);
    fill(black);
    rect(posX+4*spacebtwx, posY-GA*barheight, widthbar, GA*barheight);
    fill(blue2);
    rect(posX+5*spacebtwx, posY-PG*barheight, widthbar, PG*barheight);
    fill(red);
    rect(posX+6*spacebtwx, posY-OG*barheight, widthbar, OG*barheight);
    fill(color1);
    rect(posX+5, posY, 15, 20);
    fill(color2);
    rect(posX+20, posY, 15, 20);
  }
  
}

class PieChart{
  float posX, posY;
  float percentage;
  float radius;
  float anglei, anglef;
  color colors;
  String name;
  
  
  PieChart(String player, float goal, color colorpie, float angle1, float angle2){
    posX = 1200;
    posY = 300;
    radius = 300;
    colors = colorpie;
    anglei = angle1;
    anglef = angle2;
    float num = goal;
    name = player;
    
  }
  
  void drawData(){
    fill(colors);
    arc(posX, posY, radius, radius, anglei, anglef);
  }
  
  void drawBigCircle(){
    fill(colors);
    arc(width/2, height/2, radius*2, radius*2, anglei, anglef);
    textSize(24);
    pushMatrix();
    translate(width/2, height/2);
    rotate((anglei+anglef)/2);
    fill(0);
    textAlign(RIGHT);
    text(name, 0, 0);
    popMatrix();
    
  }
  
}

class Winners{
  float posX, posY;
  float wins;
  color colors;
  String name;
  int barlength, barwidth;
  
  
  Winners(int position, String country, float number, color colorbar){
    posX = 70;
    posY = 40*position + 110;
    name = country;
    wins = number;
    colors = colorbar;
    barlength = 75;
    barwidth = 25;
    
  }
  
  void drawData(){
    fill(colors);
    rect(posX, posY, wins*barlength, barwidth);
    fill(0);
    textSize(18);
    textAlign(RIGHT);
    text(name, posX-5, posY+20);
  }
  
}