​

let slider;

let starsCount = 11;

​

let months = [

  "Mar",

  "Apr",

  "May",

  "Jun",

  "Jul",

  "Aug",

  "Sep",

  "Oct",

  "Nov",

  "Dec",

  "Jan",

  "Feb",

];

​

let zeroRadius = 125;

let oneRadius = 200;

​

let cold, warm;

​

function preload() {

  data = loadTable("giss-data-apr-11-2023.csv", "csv", "header");

}

​

function setup() {

  createCanvas(600, 600);

​

  cold = color(0, 0, 255);

  warm = color(255, 0, 0);

​

  slider = createSlider(0, data.rows.length * months.length - starsCount);

  slider.size(width);

​

  slider.input(draw);

  noLoop();

}

​

function draw() {

  background(0);

​

  if (frameCount == 1) {

    translate(300, 300);

    frameCount++;

  }

​

  data.rows

    .map((row) => row.arr.slice(1, 13)) // extracting only the values

    .flat() // merging into 1 array

    .map((x, i, arr) => [parseFloat(arr[i + 1]), parseFloat(x)]) //making [next,current] pairs

    .slice(0, -starsCount) //removing the stars

    .slice(0, slider.value()) //limiting the lines

    .map((v) => v.map((x) => map(x, 0, 1, zeroRadius, oneRadius))) //remapping to radius

    .map(([a, b], i) => {

      let avg = map((a + b) / 2, zeroRadius, oneRadius, 0, 1);

​

      stroke(lerpColor(color(255), avg < 0 ? cold : warm, abs(avg)));

​

      let angle = map(i, 0, months.length, 0, TWO_PI) - PI / 3;

​

      let x1 = a * cos(angle);

      let y1 = a * sin(angle);

      let x2 = b * cos(angle - PI / 6);

      let y2 = b * sin(angle - PI / 6);

​

      line(x1, y1, x2, y2);

    });

​

  stroke(255);

  strokeWeight(2);

  noFill();

  circle(0, 0, 500);

  circle(0, 0, zeroRadius * 2);

  circle(0, 0, oneRadius * 2);

​

  textAlign(CENTER, CENTER);

  textSize(16);

  fill(255);

  noStroke();

  text("0°", zeroRadius + 10, 0);

  text("1°", oneRadius + 10, 0);

​

  months.map((month, i) => {

    let angle = map(i, 0, months.length, 0, TWO_PI);

    push();

    let x = 264 * cos(angle);

    let y = 264 * sin(angle);

    translate(x, y);

    rotate(angle + PI / 2);

    text(month, 0, 0);

    pop();

  });

​

  textSize(32);

  let year = 1880 + Math.floor(slider.value() / 12);

  text(year, 0, 0);

​

  noFill();

  stroke(255);

}

​