let birdData;

let years;

let diameter = 0;

let counter = 0;

let birdColour = 0;

let rate = 0.02

​

function preload() {

  table = loadTable("wild_birds.csv", "csv", "header");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  birdData = table.getColumn("data");

  years = table.getColumn("year");

  print(table);

  colorMode(HSB)

}

​

function draw() {

  background(360-birdColour, 100, 100)

  let smallerSide = min(width, height)

  let d = map(birdData[counter], 80, 110, 0, smallerSide);

  let c = map(birdData[counter], 80, 110, 0, 360);

  diameter = lerp(diameter, d, rate);

  birdColour = lerp(birdColour, c, rate)

  noStroke();

  fill(birdColour, 100, 100);

  circle(width / 2, height / 2, diameter);

  fill(100,0,100)

  textAlign(CENTER, CENTER)

  textSize( width/10)

  text(years[counter], width/2, height/2)

  if (frameCount % 60 === 0) {

    counter++;

  }

  if (counter > birdData.length - 1) {

    counter = 0;

  }

}

​