//Data Visualization

//For my assignment, I decided to track how many times as well as number of minutes that I listened to music per day. I also calculated the average per day, maximum and minimum values. If you hover your mouse over each box, the data will appear. 

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(0);

  noStroke();

  fill(255, 204, 255);

  ellipse(90, 110, 80, 80);

  if(mouseX>90 && mouseX<180 && mouseY>110 && mouseY < 190)

  fill(0);

  textSize(12);

  text("T: 8 times",63,115);

  fill(255, 255, 204);

  ellipse(75, 150, 50, 50);

  if(mouseX>75 && mouseX<125 && mouseY>150 && mouseY < 200)

  fill(0);

  textSize(9);

  text("F: 5 times", 55, 155);

  fill(204, 255, 153);

  ellipse(144, 141, 60,60);

  if(mouseX>144 && mouseX<204 && mouseY>141 && mouseY < 201)

  fill(0);

  textSize(10);

  text("S: 6 times", 120, 145);

  fill(204, 204, 255);

  ellipse(115, 179, 40,40);

  if(mouseX>115 && mouseX<155 && mouseY>179 && mouseY < 219)

  fill(0);

  textSize(7);

  text("S: 4 times", 100, 184);

  fill(255, 153, 204);

  ellipse(175, 200, 80,80);

  if(mouseX>175 && mouseX<255 && mouseY>200 && mouseY < 280)

  fill(0);

  textSize(12);

  text("M: 8 times", 147, 205);

  fill(153, 204, 255);

  ellipse(90, 230, 90,90);

  if(mouseX>90 && mouseX<180 && mouseY>230 && mouseY < 320)

  fill(0);

  textSize(12);

  text("T: 9 times", 63, 235);

  fill(153, 204, 255);

  ellipse(90, 230, 90,90);

  if(mouseX>90 && mouseX<180 && mouseY>230 && mouseY < 320)

  fill(0);

  textSize(12);

  text("W: 9 times", 63, 235);

  fill(255, 204, 255);

  rect(320, 300, 80, 80);

  if(mouseX>320 && mouseX<400 && mouseY>300 && mouseY < 380)

  fill(0);

  textSize(11);

  text("T: 206 minutes",323,347);

  fill(255, 255, 204);

  rect(370, 350, 50, 50);

  if(mouseX>370 && mouseX<420 && mouseY>350 && mouseY < 400)

  fill(0);

  textSize(7);

  text("F: 335 minutes", 371, 380);

  fill(204, 255, 153);

  rect(430, 330, 60,60);

  if(mouseX>430 && mouseX<490 && mouseY>330 && mouseY < 390)

  fill(0);

  textSize(8);

  text("S: 293 minutes", 432, 364);

  fill(204, 204, 255);

  rect(410, 390, 40,40);

  if(mouseX>410 && mouseX<450 && mouseY>390 && mouseY < 450)

  fill(0);

  textSize(5);

  text("S: 240 minutes", 413, 412);

  fill(255, 153, 204);

  rect(480, 400, 80,80);

  if(mouseX>480 && mouseX<560 && mouseY>400 && mouseY < 480)

  fill(0);

  textSize(10);

  text("M: 201 minutes", 483, 442);

  fill(153, 204, 255);

  rect(400,460, 90,90);

  if(mouseX>400 && mouseX<490 && mouseY>460 && mouseY < 540)

  fill(0);

  textSize(12);

  text("T: 271 minutes", 405, 518);

​

  fill(255,255,255);

  text("average per day: 257.6 minutes",10,580);

  text("maximum value: 335 minutes",230,580);

  text("minimum value: 201 minutes",420,580);

  fill(255,255,255); 

  textSize(32); 

  text('MUSIC TRACKER',170,60);

  textStyle(BOLD);

  fill(255,255,255); 

  textSize(18); 

  text('Anjali Chary',250,90);

  textStyle(BOLD);

​

​

​

}