let selectedEnergy = 'Solar';

let xValues = [];

let yValues = [];

​

function preload() {

  // Load the data

  data = loadTable('energy.csv', 'csv', 'header');

}

​

function setup() {

  createCanvas(800, 600);

  // Set up interactive controls

  let energySelector = createSelect();

  energySelector.position(20, 20);

  energySelector.option('Solar');

  energySelector.option('Wind');

  energySelector.option('Hydropower');

  energySelector.changed(updateEnergy);

  processData();

}

​

function draw() {

  background(255);

  // Draw the line graph

  drawLineGraph();

}

​

function updateEnergy() {

  // Update the selected energy type

  selectedEnergy = this.value();

}

​

function processData() {

  // Extract x and y values from the data for the selected energy type

  xValues = [];

  yValues = [];

  for (let i = 0; i < data.getRowCount(); i++) {

    let year = data.getNum(i, 'Year');

    let value = data.getNum(i, selectedEnergy);

    xValues.push(year);

    yValues.push(value);

  }

}

​

function drawLineGraph() {

  // Draw the axes

  stroke(0);

  line(100, height - 100, width - 100, height - 100);

  line(100, height - 100, 100, 100);

  // Draw the title

  textSize(20);

  textAlign(CENTER, CENTER);

  text(selectedEnergy + ' Production Over Time', width / 2, 50);

  // Draw the data points and labels

  noFill();

  beginShape();

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

    let x = map(xValues[i], min(xValues), max(xValues), 100, width - 100);

    let y = map(yValues[i], 0, max(yValues), height - 100, 100);

    vertex(x, y);

    ellipse(x, y, 8, 8);

    // Draw labels for years

    textAlign(CENTER);

    text(xValues[i], x, height - 70);

    // Draw labels for amounts

    textAlign(LEFT);

    text(nf(yValues[i], 0, 2), 110, y);

  }

  endShape();

}

​