xxxxxxxxxx
70
let table;
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;
}
}