How Hot is it?

Couple of months ago I stumbled upon a poster design challenge on Instagram from Posterjam on a theme ‘Hot’. Back then I was going through multiple dataset published from NASA and came across this one from Goddard Institute for Space Studies documenting the Global Annual Mean Surface temperature since 1880. I thought of playing around with this data and make a visualization reflecting the alarming rate by which our planet is heating up especially in the last decades.

I wanted to keep the poster minimal and make the visualization component to be the focal point of the overall composition. The idea was to draw a ‘Sun’ as the focal point and bring in the data to visualization within to communicate the story. The sun is composed by a series of vertically stacked lines, each representing the Global Annual Mean surface temperature data of a given year since 1880. I used P5js to create this line stacking visualization element.

Here is the Code!

////// Title  : HOW HOT IS IT? 
////// Note   : Visualizing the Global Annual Mean Surface temperature
////// Author : @patternseeing 
////// Year   : 2021           
////// Data   : https://data.giss.nasa.gov/gistemp/uncertainty/
////// License : CC BY-NC

/////////////////////////////////////////////////////////////////////////////

var filePath = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vS3lY12_SI-Biv94U-_jcu72167nvQFy0UeLYQKW-bZ_Dpk3e1TiYP2voKCx4uDKauR3jqWpbapsWjv/pub?output=csv';

var table;
var years=[];
var val = [];
var lx = 100;
var ly = 100;
var t = 3;
var c1;
var c2;

function preload(){
  table = loadTable(filePath,'header','csv');
}

function setup() {
  createCanvas(800, 800);
  years= table.getColumn('year');
  vals= table.getColumn('gistemp');

c1= color(255,255,0);
c2= color(255,0,0);
  
console.log(min(vals));
}

function draw() {
  background(220);
 
  push();
  translate(lx,ly);
  
  for(var i=0;i<years.length;i++){
    var dx = map(vals[i],min(vals),max(vals),0,1);
    var c3 = lerpColor(c1,c2,dx);
    stroke(c3);
    strokeWeight(t);
    line(0,i*t,200,i*t);
  }
  pop();
}

Final poster

If any of you seeing this require a high resolution file of the above images, please send us an email or mention it in the comment. And as always, would like to hear from you guys..

Stay safe 🙂