let dates, minTemperatures, maxTemperatures; // Arrays to store data

let margin = 60;

​

function preload() {

  // Load the CSV file

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

}

​

function setup() {

  createCanvas(800, 400);

  background(240);

  extractData(); // Extract data from the CSV

  drawLineGraph();

}

​

function extractData() {

  // Extract the columns we need

  dates = table.getColumn('date');

  minTemperatures = table.getColumn('actual_min_temp');

  maxTemperatures = table.getColumn('actual_max_temp');

}

​

function drawLineGraph() {

  // Define some constants for the graph

  let graphWidth = width - 2 * margin;

  let graphHeight = height - 2 * margin;

  let dateMin = 0;

  let dateMax = dates.length - 1;

​

  // Calculate the range of temperatures

  let minTempMin = min(minTemperatures);

  let minTempMax = max(minTemperatures);

  let maxTempMin = min(maxTemperatures);

  let maxTempMax = max(maxTemperatures);

​

  // Draw grid lines

  stroke(200);

  strokeWeight(0.5);

  for (let i = 0; i < 10; i++) {

    let y = map(i, 0, 9, height - margin, margin);

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

  }

​

  // Draw labels for x-axis (dates)

  textAlign(CENTER, CENTER);

  textSize(12);

  fill(0);

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

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

    text(dates[i], x, height - margin / 2);

  }

  text('Date', width / 2, height - margin / 6);

  text('Temp (°C)', margin / 2, height / 2);

​

  // Draw temperature lines (min and max)

  drawTemperatureLine(minTemperatures, minTempMin, minTempMax, color('rgb(237,52,86)'));

  drawTemperatureLine(maxTemperatures, maxTempMin, maxTempMax, color('purple'));

​

  // Add legend

  drawLegend();

​

  // Title

  noStroke();

  textSize(20);

  text('Daily Temperature Trends', width / 2, margin / 2);

}

​

​

//function to draw temp lines

function drawTemperatureLine(temperatures, tempMin, tempMax, lineColor) {

  noFill();

  stroke(lineColor);

  strokeWeight(2);

  beginShape();

  // Loop through each data point (temperature)

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

    // Map the data point's position to the canvas coordinates

    let x = map(i, 0, temperatures.length - 1, margin, width - margin);

    let y = map(temperatures[i], tempMin, tempMax, height - margin, margin);

    // Add a curve vertex at the mapped position

    curveVertex(x, y);

  }

  endShape();

}

​

function drawLegend() {

  // Add legend

  textSize(12);

  text('Legend:', margin, height - margin * 1.5);

  // Min temperature marker

  fill('purple');

  ellipse(margin + 40, height - margin * 1.5, 10, 10);

// Max temperature marker

  fill('rgb(227,44,76)');

  ellipse(margin + 40, height - margin * 1.2, 10, 10); 

}