let objArray = [];

var up;

var textcolor;

var barcolor;

var opac;

​

function preload() {

  populations = loadTable("assets/simpleData_noRegions.csv", "csv", "header");

}

​

function setup() {

  // put setup code here

  createCanvas(1064, 640);

​

  console.log(populations.getRowCount() + " total rows in table");

  console.log(populations.getColumnCount() + " total columns in table");

​

  // how do we want to work with our Table Data?

  console.log(populations.getObject());

​

  console.log(populations.getArray());

​

  console.log(populations.getRows());

​

​

​

  // What if we want to work with an Array of Objects - let's create that

  // Create an array of objects - declare it globally to access it in draw function too

​

  for (let i = 0; i < populations.getRowCount(); i++) {

​

    // get the object from each CSV row - country, estimate, margin of error

    //console.log(populations.getRow(i));

    let oldObj = populations.getRow(i).obj;

​

    let newObj = {};

    newObj.country = oldObj.country;

    // interpret as a number instead of a string with parseInt

    newObj.estimate = parseInt(oldObj.estimate);

    newObj.error = parseInt(oldObj.marginOfError);

    // put the object into the array

    objArray.push(newObj);

  }

​

  console.log(objArray);

​

​

​

}

​

function draw() {

  background(0);

  noStroke();

  for (let i = 0; i < populations.getRowCount(); i++) {

    up = map(objArray[i].estimate, 0, 11643298, 0, 640);

        wide = map(objArray[i].estimate, 0, 7000000, 0, 1064);

    opac = map(objArray[i].estimate, 0, 11643298, 80, 30);

​

​

//     if (i >= 0 && i < 8) {

//       barcolor = color(128, 200, 255);

//     }

//     if (i >= 8 && i < 15) {

//       barcolor = color(0, 0, 255);

//     }

​

//     if (i >= 15 && i < 21) {

//       barcolor = color(128, 0, 255);

//     }

​

//     if (i >= 21 && i < 38) {

//       barcolor = color(255, 12, 0);

//     }

​

//     if (i >= 38 && i < 44) {

//       barcolor = color(0, 255, 0);

//     }

​

//     if (i >= 44 && i < 54) {

//       barcolor = color(255, 128, 0);

//     }

//     if (i >= 54 && i < 64) {

//       barcolor = color(255, 255, 0);

//     }

//     if (i >= 64 && i < 75) {

//       barcolor = color(255, 128, 255);

//     }

​

//     if (i >= 75 && i < 80) {

//       barcolor = color(128, 255, 0);

//     }

//     if (i >= 80 && i < 83) {

//       barcolor = color(255, 255, 128);

//     }

//     if (i >= 83 && i < 87) {

//       barcolor = color(255, 0, 255);

//     }

​

//     if (i >= 87 && i < 89) {

//       barcolor = color(0, 90, 255);

//     }

//     if (i >= 89 && i < 95) {

//       barcolor = color(255, 89, 90);

//     }

​

//     if (i >= 95 && i < 98) {

//       barcolor = color(0, 255, 255);

//     }

​

//     if (i >= 98 && i < 111) {

//       barcolor = color(90, 255, 128);

//     }

​

//     if (i >= 111 && i < 120) {

//       barcolor = color(90, 0, 90);

//     }

//     if (i >= 120 && i < 131) {

//       barcolor = color(90, 0, 255);

//     }

​

//     if (i >= 131 && i < 133) {

//       barcolor = color(255, 255, 255);

//     }

​

//     colorMode(HSB, 133)

    fill(i, 255, 255, opac);

    rectMode(CENTER);

    rect(532, i*5, wide, up);

    colorMode(HSB, 133);

    fill(i, 255, 0);

    ellipse(532-wide/2, i*5, 10, up);

    ellipse(532+wide/2, i*5, 10, up);

  }

​

  var mousedivisor = int(mouseX / 8);

​

  if (mousedivisor <= 132) {

//     if (mousedivisor >= 0 && mousedivisor < 8) {

//       textcolor = color(128, 200, 255);

//     }

​

//     if (mousedivisor >= 8 && mousedivisor < 15) {

//       textcolor = color(0, 0, 255);

//     }

​

//     if (mousedivisor >= 15 && mousedivisor < 21) {

//       textcolor = color(128, 0, 255);

//     }

​

//     if (mousedivisor >= 21 && mousedivisor < 38) {

//       textcolor = color(255, 12, 0);

//     }

​

//     if (mousedivisor >= 38 && mousedivisor < 44) {

//       textcolor = color(0, 255, 0);

//     }

​

//     if (mousedivisor >= 44 && mousedivisor < 54) {

//       textcolor = color(255, 128, 0);

//     }

​

//     if (mousedivisor >= 54 && mousedivisor < 64) {

//       textcolor = color(255, 255, 0);

//     }

​

//     if (mousedivisor >= 64 && mousedivisor < 75) {

//       textcolor = color(255, 128, 255);

//     }

//     if (mousedivisor >= 75 && mousedivisor < 80) {

//       textcolor = color(128, 255, 0);

//     }

​

//     if (mousedivisor >= 80 && mousedivisor < 83) {

//       textcolor = color(255, 255, 128);

//     }

//      if (mousedivisor >= 83 && mousedivisor < 87) {

//       textcolor = color(255, 0, 255);

//     }

​

//      if (mousedivisor >= 87 && mousedivisor < 89) {

//       textcolor = color(0, 90, 255);

//     }

​

//     if (mousedivisor >= 89 && mousedivisor < 95) {

//       textcolor = color(255, 89, 90);

//     }

//     if (mousedivisor >= 95 && mousedivisor < 98) {

//       textcolor = color(0, 255, 255);

//     }

//     if (mousedivisor >= 98 && mousedivisor < 111) {

//       textcolor = color(90, 255, 128);

//     }

//       if (mousedivisor >= 111 && mousedivisor < 120) {

//       textcolor = color(90, 0, 90);

//     }

//     if (mousedivisor >= 120 && mousedivisor < 131) {

//       textcolor = color(90, 0, 255);

//     }

//      if (mousedivisor >= 131 && mousedivisor < 133) {

//       textcolor = color(255, 255, 255);

//     }

    // fill(mousedivisor, 255, 255, 280-opac);

    // textSize(32)

    // var current_country = objArray[mousedivisor].country;

    // text(current_country, 2, 32);

    // var current_estimate = objArray[mousedivisor].estimate;

    // var current_error = objArray[mousedivisor].error;

    // text(current_estimate + " ± " + current_error, 2, 64);

  }

  // How might you sort the countries by population estimate?

​

  // How might you visually represent the population estimates?

  // Try a few different ways

  // Think about shape, color, text

  // Once you feel comfortable with drawing a static representation, think about adding interactivity

}