let loaded = false;

let state = 0;

let popu;

  let popD ;

  let negTest;

  let negD;

  let posTest;

  let posD;

  let cases;

  let caseD;

  let deaths;

  let deathsD ;

let mapVal;

let sel;

function preload() {

  const url = 'https://api.covidactnow.org/v2/states.json?apiKey=99df1fa0809a40b58d1cc2ffb6a34a2b';

​

  fetch(url)

  .then(response => {

    console.log(response);

    return response.json();

  })

  .then(data => {

    cData = data;

    console.log(data);

    loaded = true;

  });

}

function setup() {

  createCanvas(600, 600);

  console.log(cData);

  noStroke();

  sel = createSelect();

  sel.option("AK", 0);

  sel.option("AL", 1);

  sel.option("AR", 2);

  sel.option("AZ", 3);

  sel.option("CA", 4);

  sel.option("CO", 5);

  sel.option("CT", 6);

  sel.option("DC", 7);

  sel.option("DE", 8);

  sel.option("FL", 9);

  sel.option("GA", 10);

  sel.option("HI", 11);

  sel.option("IA", 12);

  sel.option("ID", 13);

  sel.option("IL", 14);

  sel.option("IN", 15);

  sel.option("KS", 16);

  sel.option("KY", 17);

  sel.option("LA", 18);

  sel.option("MA", 19);

  sel.option("MD", 20);

  sel.option("ME", 21);

  sel.option("MI", 22);

  sel.option("MN", 23);

   sel.option("MO", 24);

  sel.option("MP", 25);

  sel.option("MS", 26);

  sel.option("MT", 27);

  sel.option("NC", 28);

  sel.option("ND", 29);

  sel.option("NE", 30);

  sel.option("NH", 31);

  sel.option("NJ", 32);

  sel.option("NM", 33);

  sel.option("NV", 34);

  sel.option("NY", 35);

  sel.option("OH", 36);

  sel.option("OK", 37);

  sel.option("OR", 38);

  sel.option("PA", 39);

  sel.option("PR", 40);

  sel.option("RI", 41);

  sel.option("SC", 42);

  sel.option("SD", 43);

  sel.option("TN", 44);

  sel.option("TX", 45);

  sel.option("UT", 46);

  sel.option("VA", 47);

    sel.option("VT", 48);

  sel.option("WA", 49);

  sel.option("WI", 50);

  sel.option("WV", 51);

  sel.option("WY", 52);

  sel.position(0,0);

}

​

function draw() {

  background(255);

  if(loaded){

  textAlign(CENTER, CENTER);

  textSize(24);

    state = sel.value();

  text(`US-${cData[state].state}`, width/2, 20);

  line(0, 500, width, 500);

  popu = cData[state].population;

  negTest = cData[state].actuals.negativeTests;

  posTest = cData[state].actuals.positiveTests;

  cases = cData[state].actuals.cases;

  deaths = cData[state].actuals.deaths;

    mapVal = max(popu, negTest, posTest, cases, deaths);

  deathsD = map(deaths, 0, mapVal, 0, 450);

    popD =  map(popu, 0, mapVal, 0, 450);

    negD = map(negTest, 0, mapVal, 0, 450);

   casesD = map(cases, 0, mapVal, 0, 450);

  posD = map(posTest, 0, mapVal, 0, 450);

    rectMode(CORNERS);

    fill(38, 70, 83);

    rect(10, 500, 110, 500 - popD);

    fill(42, 157, 143);

    rect(130, 500, 230, 500 - negD);

    fill(233, 196, 106);

    rect(250, 500, 350, 500 - posD);

    fill(244, 162, 97);

    rect(370, 500, 470, 500 - casesD);

    fill(231, 11, 81);

    rect(490, 500, 590, 500 - deathsD);

    fill(0);

    textSize(12);

  text(`POPULATION:\n${popu}`, 60, 550);

  text(`NEGATIVE TESTS:\n${negTest}`,180, 550);

  text(`POSITIVE TESTS:\n${posTest}`, 300, 550);

  text(`CASES:\n${cases}`, 420, 550);

  text(`DEATHS:\n${deaths}`, 540, 550);

}

}

​

​

​