let dates;

let rates;

let counter = 0;

​

// loads the data from a .csv source before the program runs

function preload() {

  table = loadTable('bpw.csv', 'csv', 'header');

}

​

function setup() {

  createCanvas(1000, 500);

  background(0);

​

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

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

​

  dates = table.getColumn('date');

  rates = table.getColumn('rate');

​

  // noLoop();

  frameRate(10);

}

​

function drawLine(counter) {

  strokeWeight(0.5);

  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);

  line(500, 400, mappedDate, mappedRate);

  noStroke();

  fill(250);

  dates[counter] % 54 === 0 && text(dates[counter], 50, mappedRate);

  mappedRate % 10 === 0 && text(rates[counter], mappedRateX, 450);

}

​

function drawTitle() {

  fill(0);

  rect(0,0,1000,100);

  fill(255);

  textSize(20);

  text(`Date: ${dates[counter]}`,250,90);

  text(`Rate: ${rates[counter]}`,700,90);

  textSize(30);

  textAlign(CENTER);

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

}

​

function drawDataSource() {

  fill(0);

  rect(8,485,500,500);

  fill(255);

  textAlign(LEFT);

  textSize(8);

  text('Data from https://www.gapminder.org/data/documentation/gd008/',10,490);

}

​

function draw() {

  drawTitle();

  drawLine(counter);

  drawDataSource();

  if(counter < 300){

    counter++;

  } else {

    counter = 0;

  }

}