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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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;
}
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; }
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;
}
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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();
}
}
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(); } }
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();
  }
}

 

One thought on “Week 4: Data Visualization”

  1. Nice job Ziyad, I like the flowing circles. I think maybe adding a little stroke outline to the words would be helpful. The bottom one looks like there is no name there when not highlighted since there were so few searches (I’m guessing). I had to look at it for a long time before I realized it wasn’t a mistake in the program. Even when things aren’t actually mistakes, when designing stuff, we have to account for things being perceived as mistakes too.

Leave a Reply