let tableLife;

let namesIncome;

let datesIncome;

let dollars;

let rates;

let counter = 0;

​

function preload() {

  tableIncome = loadTable('income.csv', 'csv', 'header');

  tableLife = loadTable('life.csv', 'csv', 'header');

​

}

​

function setup() {

  createCanvas(1000, 700);

  background(0);

​

  // print(income.getRowCount() + ' total rows in table');

  // print(life.getRowCount() + ' total rows in table');

  // print(life.getColumnCount() + ' total columns in table');

​

    // get data from Income Table

  namesIncome = tableIncome.getColumn('name');

  datesIncome = tableIncome.getColumn('time');

  dollars = tableIncome.getColumn('Income per person');

  frameRate(10);

}

​

function drawLine(counter) {

​

  strokeWeight(20);

  textSize(10);

  let mappedDate = map(dates[counter], 1800, 2100, 100, 900);

  let mappedRate = map(rates[counter], 6, 1.8, 100, 400);

  let mappedRateX = map(rates[counter], 6, 1.8, 100, 900);

  let mappedColour = map(mappedRate, 10, 390, 0, 255);

  stroke(255 - mappedColour, mappedColour, 0);

​

  fill(0);

​

  circle(width / 2, 280, rates[counter] * 60);

  noStroke();

  fill(250);

​

  textSize(20);

  fill(0);

  rect(0, 0, 300, 500);

  fill(255);

  textAlign(LEFT);

  text(`Date: ${dates[counter]}`, 100, 190);

  text(`Rate: ${rates[counter]}`, 100, 390);

​

  textSize(40);

  textAlign(CENTER);

  text('Babies per woman', width / 2, 50);

}

​

function draw() {

  console.log(datesIncome);

  fill(255);

  let mapped = map(datesIncome[counter],603,3140,100,900);

  datesIncome && circle(mapped, 500,parseInt(dollars));

  counter++;

//   // drawLine(counter);

//   // if(counter < 300){

//   //   counter++;

//   // } else {

//   //   counter = 0;

//   // }

}