let toggle = true;

function preload() {

  data = loadJSON('Songs.json');

}

​

function setup() {

  createCanvas(1000, 600);

  background(220);

  setInterval(frequency, 0);

  // setInterval(duration,0);

}

​

function draw() {

  // background(220);

  // console.log(mouseX);

  // if(toggle){

  //   setInterval(frequency, 1000);

  //   setInterval(duration, 2000);

  //   toggle = false;

  // }

    push();

  translate(10,80);

  text("Data Portrait: 3 Songs / Day Over A Week ",0,100);

  pop();

    //axis text

  push();

  translate(10,190);

  fill(0);

  text("Title",0,50,100);

  fill(0);

  text("Frequency of word love",0,100,100);

  fill(0);

  text("Artist",0,150,100);

  pop();

  for(let i= 0;i<21;i++){

  if(dist(mouseX,mouseY,i*40,height/2)<10){

    text(data[i].Song_Title,i*40,height/2-50);

    text(data[i].Artist,i*40,height/2+51);

  }

  }

}

​

function frequency() {

  background(255);

    fill(0);

  // console.log('this loop once');

  for(let i =0; i< 21;i++){

    ellipse(i*40+95,height/2,10+data[i].Love_Frequency,10+data[i].Love_Frequency);

  }

}

​

​

function duration(){

  // background(255);

  rectMode(CENTER);

  for (let i = 0; i < 21; i++) {

    fill(0);

    // rect(i*35,height/2+100,data[i].Duration*10,data[i].Duration*10);

    // console.log('loop');

  }

}