let dates = [];

let values = [];

let currentFrame = 0;

​

function preload() {

  // Load the CSV file

  table = loadTable('gold prices.csv', 'csv', 'header');

}

​

function setup() {

  createCanvas(800, 400);

  frameRate(15);

  background(240);

​

  // Extract dates and values from the loaded CSV data

  for (let row of table.rows) {

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

    let value = parseFloat(row.get('Close/Last'));

    dates.push(date);

    values.push(value);

  }

}

​

function draw() {

  background(240);

​

  // Define the minimum and maximum values for scaling

  let minValue = min(values);

  let maxValue = max(values);

​

  // Draw a smooth, colorful line connecting data points

  noFill();

  beginShape();

  strokeWeight(4);

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

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

    let y = map(values[i], minValue, maxValue, height - 50, 50);

    let r = map(i, 0, values.length - 1, 0, 255);

    let g = map(values[i], minValue, maxValue, 0, 255);

    let b = map(i, 0, values.length - 1, 255, 0);

    stroke(r, g, b);

    vertex(x, y);

  }

  endShape();

​

  // Animate the drawing

  if (currentFrame < values.length - 1) {

    currentFrame += 2; // Increase the step for a smoother animation

  }

​

  // Draw artistic elements (e.g., circles)

  noStroke();

  fill(255, 0, 0, 150); // Red, semi-transparent circles

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

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

    let y = map(values[i], minValue, maxValue, height - 50, 50);

    ellipse(x, y, 20, 20);

  }

​

  // Draw the x-axis labels

  textSize(12);

  textAlign(CENTER);

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

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

    text(dates[i], x, height - 10);

  }

}

​

​