let minTemp = [];

let maxTemp = [];

let dates = [];

​

function preload() {

  // Load your data file

  weather = loadTable('weather.csv', 'header');

}

​

function setup() {

  createCanvas(800, 400);

  parseData();

  drawChart();

}

​

function parseData() {

  // Parse the data table

  for (let row of weather.rows) {

    let date = row.get('date');

    let min = row.getNum('actual_min_temp');

    let max = row.getNum('actual_max_temp');

​

    // Check for valid data

    if (date && !isNaN(min) && !isNaN(max)) {

      dates.push(date);

      minTemp.push(min);

      maxTemp.push(max);

    }

  }

}

​

function drawChart() {

  background(220);

  textSize(14);

  textAlign(CENTER);

​

  // Draw x-axis labels

  for (let i = 0; i < dates.length; i++) {

    let x = map(i, 0, dates.length - 1, 50, width - 50);

    push();

    translate(x, height - 20);

    rotate(PI / 3);

    text(dates[i], 0, 0);

    pop();

  }

​

  // Draw y-axis labels and lines

  let maxTempMax = max(maxTemp);

  let minTempMin = min(minTemp);

  for (let i = minTempMin; i <= maxTempMax; i += 10) {

    let y = map(i, minTempMin, maxTempMax, height - 50, 50);

    line(40, y, width - 40, y);

    text(i, 20, y);

  }

​

  // Draw minimum temperature line

  stroke(0, 0, 255);

  strokeWeight(2);

  beginShape();

  for (let i = 0; i < minTemp.length; i++) {

    let x = map(i, 0, minTemp.length - 1, 50, width - 50);

    let y = map(minTemp[i], minTempMin, maxTempMax, height - 50, 50);

    vertex(x, y);

  }

  endShape();

​

  // Draw maximum temperature line

  stroke(255, 0, 0);

  beginShape();

  for (let i = 0; i < maxTemp.length; i++) {

    let x = map(i, 0, maxTemp.length - 1, 50, width - 50);

    let y = map(maxTemp[i], minTempMin, maxTempMax, height - 50, 50);

    vertex(x, y);

  }

  endShape();

}