//let APIkey = "access_key=9b0c1d570c14ad878816c4e00f6fcc74";

let endpoint = "/2020-01-30..2020-12-14?";

let parameters = "amount=1&from=USD&to=CNY";

let covid = "https://pomber.github.io/covid19/timeseries.json";

let rates;

let x;

let b=35;

let CNY=[];

let dates=[];

let num=[];

let retrieveCode=[26,68,113,155,197,239,281,323];

let textLocation=[8,88,168,248,328,408,488,568];

​

​

function setup() {

  createCanvas(600, 600);

  background(0);

  let url = host+endpoint+parameters;

  loadJSON(url,getData2);

  loadJSON(covid,getCovidData2);

​

​

​

​

}

​

function draw() {

  //console.log(mouseX, mouseY);

}

​

function getData2(data){

  rates=data.rates;

  for(date in rates){

    CNYrate = rates[date].CNY

    CNY.push(CNYrate);

    dates.push(date);

  }

   for(d in dates){

     num.push(d);

   }

  print(dates.length);

  for (let n=0; n<num.length/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],n*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],n*39+25,b-10);

    fill(255,0,102);

    //circle(n*39+25,b-25,CNY[num[n]]*1.1);

  }

  b+=40;

  for (let n=15; n<num.length*2/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-15)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-15)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=30; n<num.length*3/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-30)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-30)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=45; n<num.length*4/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-45)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-45)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=60; n<num.length*5/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-60)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-60)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=75; n<num.length*6/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-75)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-75)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=90; n<num.length*7/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-90)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-90)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=105; n<num.length*8/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-105)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-105)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=120; n<num.length*9/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-120)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-120)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=135; n<num.length*10/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-135)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-135)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=150; n<num.length*11/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-150)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-150)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=165; n<num.length*12/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-165)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-165)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=180; n<num.length*13/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-180)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-180)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=195; n<num.length*14/15;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-195)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-195)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

  b+=40;

  for (let n=210; n<num.length;n++){

    fill(255);

    textSize(7);

    textAlign(CENTER);

    text(dates[num[n]],(n-210)*39+25,b);

    fill(255,153,194);

    textSize(9);

    text(CNY[num[n]],(n-210)*39+25,b-10);

    fill(255,0,102);

    //circle((n-15)*39+25,b-25,CNY[num[n]]*1.1)

  }

}

function getCovidData2(data){

  let chinaCovid=data.China;

  let usCovid=data.US;

  //console.log(data);

  /*

  rectMode(CENTER);

  fill(0,255,255)

  rect(textLocation[0],100,20,8);

  fill(204,204,255);

  rect(textLocation[0],120,20,8);

  fill(255,153,194);

  rect(textLocation[0],140,20,8);

  fill(255);

  rect(textLocation[0],160,20,8);

  fill(255);

  //textAlign(CENTER);

  textSize(9);

  text(": Covid-19 confirmed cases in US on listed date",textLocation[0]+12,102);

  text(": Covid-19 confirmed cases in China on listed date",textLocation[0]+12,122);

  text(": CNY conversion rate of 1 USD to CNY",textLocation[0]+12,142);

  text(": Date",textLocation[0]+12,162);*/

    //print(retrieveCode);

  fill(204,204,255);

  textAlign(CENTER);

  textSize(7);

  text(chinaCovid[retrieveCode[0]]["confirmed"],493,textLocation[0]+8);

  text(chinaCovid[retrieveCode[1]]["confirmed"],493,textLocation[1]+8);

  text(chinaCovid[retrieveCode[2]]["confirmed"],493,textLocation[2]+8);

  text(chinaCovid[retrieveCode[3]]["confirmed"],493,textLocation[3]+8);

  text(chinaCovid[retrieveCode[4]]["confirmed"],493,textLocation[4]+8);

  text(chinaCovid[retrieveCode[5]]["confirmed"],493,textLocation[5]+8);

  text(chinaCovid[retrieveCode[6]]["confirmed"],493,textLocation[6]+8);

  text(chinaCovid[retrieveCode[7]]["confirmed"],493,textLocation[7]+8);

  fill(0,255,255)

  text(usCovid[retrieveCode[0]]["confirmed"],493,textLocation[0]);

  text(usCovid[retrieveCode[1]]["confirmed"],493,textLocation[1]);

  text(usCovid[retrieveCode[2]]["confirmed"],493,textLocation[2]);

  text(usCovid[retrieveCode[3]]["confirmed"],493,textLocation[3]);

  text(usCovid[retrieveCode[4]]["confirmed"],493,textLocation[4]);

  text(usCovid[retrieveCode[5]]["confirmed"],493,textLocation[5]);

  text(usCovid[retrieveCode[6]]["confirmed"],493,textLocation[6]);

  text(usCovid[retrieveCode[7]]["confirmed"],493,textLocation[7]);

}

​

​

​

​