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.
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”
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.
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.