Week 4 – Global Temperature Anomaly Visualization

Concept & Idea

This visualization shows the change in global temperature anomaly (the difference between the actual temperature and the long-term average temperature) over time, based on publicly available data. The visualization uses a line chart to represent the data, with the x-axis representing the years from 1753 to 2015 and the y-axis representing the temperature anomaly in degrees Celsius.

 

Implementation

The chart is generated using the p5.js library for drawing and the d3.js library for data manipulation. The code first loads the JSON data from a publicly available URL and extracts the necessary data. It then draws the x-axis and y-axis of the chart, with tick marks and labels indicating the years and temperature values. Finally, it draws the data points as small circles with color representing the temperature anomaly value, and connects them with lines to form the line chart.

let data; // variable to hold the JSON data
let minYear, maxYear, minTemp, maxTemp;

function preload() {
  // load the JSON data from a publicly available URL
  let url = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json';
  data = loadJSON(url);
}

function setup() {
  createCanvas(800, 400);
  textAlign(CENTER);
  textSize(16);
  noLoop();

  // extract the necessary data from the JSON
  let monthlyData = data.monthlyVariance;
  minYear = monthlyData[0].year;
  maxYear = monthlyData[monthlyData.length - 1].year;
  minTemp = data.baseTemperature + d3.min(monthlyData, d => d.variance);
  maxTemp = data.baseTemperature + d3.max(monthlyData, d => d.variance);
}

function draw() {
  background(255);

  // draw the x-axis
  stroke(0);
  line(50, height - 50, width - 50, height - 50);
  for (let year = minYear; year <= maxYear; year += 10) {
    let x = map(year, minYear, maxYear, 50, width - 50);
    textAlign(CENTER);
    text(year, x, height - 30);
    stroke(200);
    line(x, height - 50, x, 60);
    stroke(0);
  }

  // draw the y-axis
  line(50, height - 50, 50, 60);
  textAlign(CENTER);
  push();
  translate(30, height / 2);
  rotate(-HALF_PI);
  text("Temperature Anomaly (°C)", 0, -15);
  pop();
  for (let temp = Math.floor(minTemp); temp <= Math.ceil(maxTemp); temp += 1) {
    let y = map(temp, minTemp, maxTemp, height - 50, 60);
    textAlign(RIGHT);
    text(temp, 40, y + 5);
    stroke(200);
    line(50, y, width - 50, y);
    stroke(0);
  }

  // draw the data points and connecting lines
  noFill();
  beginShape();
  for (let i = 0; i < data.monthlyVariance.length; i++) {
    let x = map(data.monthlyVariance[i].year, minYear, maxYear, 50, width - 50);
    let y = map(data.baseTemperature + data.monthlyVariance[i].variance, minTemp, maxTemp, height - 50, 60);
    stroke(255 - map(data.monthlyVariance[i].variance, -7, 7, 0, 255), 0, map(data.monthlyVariance[i].variance, -7, 7, 0, 255));
    ellipse(x, y, 4, 4);
    vertex(x, y);
  }
  endShape();
  
  // add the title and data source
  textAlign(CENTER);
  text("Global Temperature Anomaly (°C) " + minYear + " - " + maxYear, width / 2, 30);
}

Reflection & Future Improvements