Week 4: Data Visualization

For this week’s task, I reused some modified code from the previous week’s task. I tried to make some sort of data visualization that compares the popularity of google searches on some celebrities’ names before their death and on the month of their death. I originally planned to take the mean of all months prior to their death, but I realized that would result in very low values consistently. I decided to consider only the highest month prior to their death and the month of their death. This resulted in some variety in the data. Below is a video of the visualization:

Whenever the mouse cursor hovers over one of the sections, that section displays the data on the month of death. Otherwise, the data prior to death is always displayed.

Challenges:

My PC randomly shut down twice while working on my code. I forgot to save my code on both times. Saving code periodically is a good habit.

Wait, is Wade Boggs dead?

No, interestingly though, the frequency of google searches on his name was highest the month this episode was released.

Code:

PFont font;
color bgcolor1;
color bgcolor2;
color bblclr;
int sections, bblcnt;
Thing bbls[][][];
Table table;
float diameter[][];

void setup() {
  size(800, 402);
  
  font = createFont("Franklin Gothic Heavy", 80);
  
  bgcolor1 = color(1, 148, 154);
  bgcolor2 = color(219,31,72);
  bblclr = color(209,202,185);
  
  sections = 3;
  bblcnt = 20;
  bbls = new Thing[sections][2][bblcnt];
  diameter = new float[sections][2];
  
  diameter[0] = loadData("alextrebek.csv", "2020-11");
  diameter[1] = loadData("wadeboggs.csv", "2015-01");
  diameter[2] = loadData("reckful.csv", "2020-07");
  
  for (int i=0; i<sections; i++) {
    for (int j=0; j<2; j++) {
      diameter[i][j] = map(diameter[i][j],1,100,1,80);
    }
  }
  
  for (int i=0; i<sections; i++) {
    for (int j=0; j<bblcnt; j++) {
      float ymin = i*(height/sections);
      float ymax = (i+1)*(height/sections);
      //float d = random(20,40); //temporary, replace with mean
      bbls[i][0][j] = new Thing(ymin,ymax,diameter[i][0],bblclr,false);
      bbls[i][1][j] = new Thing(ymin,ymax,diameter[i][1],bblclr,true);
    }
  }
  
}

void draw() {
  background(bgcolor1);
  
  fill(bgcolor2);
  noStroke();
  rect(0, height/3, width, height/3);
  
  for (int i=0; i<sections; i++) {
    for (int j=0; j<bblcnt; j++) {
        bbls[i][0][j].display();
        bbls[i][1][j].display();
    }
  }
  
  textAlign(CENTER, TOP);
  textSize(70);
  textFont(font);
  fill(bgcolor1);
  text("Alex Trebek", width/2, 20);
  
  textAlign(CENTER, TOP);
  textSize(70);
  textFont(font);
  fill(bgcolor2);
  text("Wade Boggs", width/2, 20+(height/3));
  
  textAlign(CENTER, TOP);
  textSize(70);
  textFont(font);
  fill(bgcolor1);
  text("Reckful", width/2, 20+(2*height/3));
}

float[] loadData(String file, String last) {
  table = loadTable(file, "header");
  float result[] = {0,0};
  for (int i=0; i<table.getRowCount(); i++) {
    TableRow row = table.getRow(i);
    
    String month = row.getString("month");
    float frequency = row.getFloat("frequency");
    
    if (month.equals(last)) {
      result[1] = frequency;
      break;
    }
    
    if (result[0] < frequency) {
      result[0] = frequency;
    }
  }
  return result;
}

class Thing {
  float x, y;
  float y_min, y_max;
  float diameter;
  float ty;
  float speed;
  color bc;
  float alpha;
  boolean active;
  Thing(float ymin, float ymax, float d, color bubbleColor, boolean state) {
    diameter = d;
    x = -diameter/2;
    y = random(ymin+(diameter/2), ymax-(diameter/2));
    ty=random(0, 10000);
    speed = random(1, 3);
    y_min = ymin;
    y_max = ymax;
    bc = bubbleColor;
    alpha = 0;
    active = state;
  }
  
  void motion() {
    y = map(noise(ty), 0, 1, y_min+(diameter/2), y_max-(diameter/2));
    x += speed;
    ty += 0.02;
  }
  
  void reposition() {
    if (x >= width+diameter/2) {
      x = -diameter/2;
    }
  }
  
  //float getAlpha() {
  //  return alpha;
  //}
  
  //void setAlpha(float a) {
  //  if (a >=0 && a <= 255) {
  //    alpha = a;
  //  } else if (a < 0) {
  //    a = 0;
  //  } else if (a > 255) {
  //    alpha = 255;
  //  }
  //}
  
  void resetAlpha() {
    if (!active && (mouseY <= y_max && mouseY >= y_min)) {
      if (alpha >=10) {
      alpha -= 10;
      }  else {
        alpha = 0;
      }
    } else if (!active && (mouseY > y_max || mouseY < y_min)) {
      if (alpha < 170) {
        alpha += 10;
      }
    }
    
    if (active && (mouseY <= y_max && mouseY >= y_min)) {
      if (alpha < 170) {
        alpha += 10;
      }
    } else if (active && (mouseY > y_max || mouseY < y_min)) {
      if (alpha >=10) {
      alpha -= 10;
      }  else {
        alpha = 0;
      }
    }
  }
  
  void display() {
    fill(bc, alpha);
    motion();
    noStroke();
    ellipse(x, y, diameter, diameter);
    reposition();
    resetAlpha();
  }
}