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

​

let numbers = [8,5,6,4,8,9] //array of the number of times i listen to music each day

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(0);

  noStroke();

  //thursday october 3

  fill(243, 69, 255);

  rect(30,120,150,150);

  if(mouseX>30 && mouseX<180 && mouseY>120 && mouseY < 270)

  fill(255,255,255);

  textSize(12);

  text("8 times",75,180);

  text("Thursday,October 3",50,200)

  text("206 minutes",70,220);

  //friday october 4

  fill(248,255,33);

  rect(30,380,150,150);

  if(mouseX>30 && mouseX<180 && mouseY>380 && mouseY < 530)

  fill(255,255,255);

  text("5 times",75,440);

  text("Friday,October 4",50,460)

  text("335 minutes",70,480);

  //saturday october 5

  fill(79, 135, 255);

  rect(230,120,150,150);

  if(mouseX>230 && mouseX<380 && mouseY>120 && mouseY < 270)

  fill(255,255,255);

  text("6 times",280,180);

  text("Saturday,October 5",250,200)

  text("293 minutes",270,220);

  //sunday october 6

  fill(82, 247, 77);

  rect(230,380,150,150);

  if(mouseX>230 && mouseX<380 && mouseY>380 && mouseY < 530)

  fill(255,255,255);

  text("4 times",280,440);

  text("Sunday,October 6",250,460)

  text("240 minutes",270,480);

  //monday october 7

  fill(255, 157, 0);

  rect(430,120,150,150);

  if(mouseX>430 && mouseX<580 && mouseY>120 && mouseY < 270)

  fill(255,255,255);

  text("8 times",480,180);

  text("Saturday,October 5",450,200)

  text("201 minutes",470,220);

  //tuesday october 8

  fill(250, 25, 5);

  rect(430,380,150,150);

  if(mouseX>430 && mouseX<580 && mouseY>380 && mouseY < 530)

  fill(255,255,255);

  text("9 times",480,440);

  text("Sunday,October 6",450,460)

  text("271 minutes",470,480);

  fill(255,255,255);

  text("this data visualization tracks how many times per day well as how many     minutes per day that i listened to music. ",5,80);

  text("hover over the boxes to see the data", 220,100);

  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);

​

for (i = 0; i < numbers.length; i = i + 1) { //i++

    rect(i * 70 + 100, 330, 50, numbers[i]);

}

  fill(255,255,255,0);

  rect(80,300,50,50);

  if(mouseX>100 && mouseX<150 && mouseY>300 && mouseY < 350)

  fill(255,255,255);

  textSize(8);

  text("8 times on Thursday", 90,350);

  fill(255,255,255,0);

  rect(170,300,50,50);

  if(mouseX>170 && mouseX<220 && mouseY>300 && mouseY < 350)

  fill(255,255,255);

  textSize(8);

  text("5 times on Friday", 160,350);

  fill(255,255,255,0);

  rect(240,300,50,50);

  if(mouseX>240 && mouseX<290 && mouseY>300 && mouseY < 350)

  fill(255,255,255);

  textSize(8);

  text("6 times on Saturday", 230,350);

  fill(255,255,255,0);

  rect(310,300,50,50);

  if(mouseX>310 && mouseX<360 && mouseY>300 && mouseY < 350)

  fill(255,255,255);

  textSize(8);

  text("4 times on Sunday", 300,350);

  fill(255,255,255,0);

  rect(380,300,50,50);

  if(mouseX>380 && mouseX<430 && mouseY>300 && mouseY < 350)

  fill(255,255,255);

  textSize(8);

  text("8 times on Monday", 370,350);

  fill(255,255,255,0);

  rect(450,300,50,50);

  if(mouseX>450 && mouseX<500 && mouseY>300 && mouseY < 350)

  fill(255,255,255);

  textSize(8);

  text("9 times on Tuesday", 440,350);

​

}