// get counts of rows and columns

// get a column

// draw circles

// color

// draw lines

// get new columns of hi and los

// draw boundaries

// consider uncertainity

// make interactive

​

function preload() {

    // var url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQxSugvIAJlBqZ0XQXYEcJLVy441tjAx4hUyV70Z0jvYHyFvJiz6-lPiNuks_fbISj-kXlTrwnXdHSo/pub?gid=57771018&single=true&output=csv"

    var url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRTpCePlzuXCpG5WBOYJiFHCn7FNF0Q5O3yVvQOQnYIP1NJAp6uKLWzS3S-5Yq2qhw0zMHDRAG_7A8L/pub?gid=600844772&single=true&output=csv"

    table = loadTable(url, 'csv', 'header');

}

​

function setup() {

  createCanvas(1000, 400);

  colorMode(HSL);

  print (table.getRowCount() + ' total rows');

  print (table.getColumnCount() + ' total columns');

}

​

function draw() {

  background(225);

  var approve_estimate = table.getColumn('approve_estimate');

  var disapprove_estimate = table.getColumn('disapprove_estimate');

  var approve_lo = table.getColumn('approve_lo');

  var approve_hi = table.getColumn('approve_hi');

  //27,100,50

​

  fill(135,100,31, 0.25);

  // stroke(135,100,31);

  noStroke();

  beginShape();

  for (var i=0; i<table.getRowCount(); i+=15) {

    var x_map = map(i, 0, table.getRowCount(), width, 0);

    var y_map = map(approve_hi[i], 20, 80, height, 0);

    vertex(x_map, y_map);

  }

​

  for (var i=table.getRowCount()-1; i>=0; i-=15) {

    var x_map = map(i, 0, table.getRowCount(), width, 0);

    var y_map = map(approve_lo[i], 20, 80, height, 0);

    vertex(x_map, y_map);

  }

  endShape();

  // line chart

  noFill();

  stroke(135,100,31);

  strokeWeight(2);

  beginShape();

  for (var i=0; i<table.getRowCount(); i+=15) {

    var x_map = map(i, 0, table.getRowCount(), width, 0);

    var y_map = map(approve_estimate[i], 20, 80, height, 0);

    vertex(x_map, y_map);

  }

  endShape();

  // circle part

  for (var i=0; i<table.getRowCount(); i+=15) {

    fill(135,100,31); //hue, saturation, luminance   ROYGBIV (255/2)

    fill(130,100,30);

    noStroke();

    var x_map = map(i, 0, table.getRowCount(), width, 0);

    var y_map = map(approve_estimate[i], 20, 80, height, 0); // start with 0,100 - move to 20,80

    ellipse(x_map, y_map, 5);

  }

  // disapproval below

  noFill();

  stroke(27,100,50);

  beginShape();

  for (var i=0; i<table.getRowCount(); i+=5) {

    var x_map = map(i, 0, table.getRowCount(), width, 0);

    var y_map = map(disapprove_estimate[i], 20, 80, height, 0);

    vertex(x_map, y_map);

  }

  endShape();

  for (var i=0; i<table.getRowCount(); i+=5) {

    fill(27,100,50);

    noStroke();

    var x_map = map(i, 0, table.getRowCount(), width, 0);

    var y_map = map(disapprove_estimate[i], 20, 80, height, 0);

    ellipse(x_map, y_map, 5);

  }

  textFont('Helvetica');

  textSize(50);

  fill(0);

  var data_map = map(mouseX, width, 0, 0, table.getRowCount());

  rect(mouseX, 0, 2, height);

  stroke(255);

  strokeWeight(5);

  fill(135,100,31);

  var msg = float(approve_estimate[int(data_map)]).toFixed(1);

  // var x_map = map(mouseX, 0, width, 0,width-200);

  var y_map = map(approve_estimate[int(data_map)], 20, 80, height, 0);

  text(msg + "%", mouseX, y_map); // do height/2 first

  fill(0);

  textSize(20);

  text("Approve", mouseX+150, y_map);

  msg = "Disapproval: " + disapprove_estimate[int(data_map)];

  // text(msg, mouseX, height/2+20);

}