​

function preload() {

  // load the CSV file

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

  // load the font

  fontLimelight = loadFont('Limelight.otf');

}

​

function setup() {

  createCanvas(400, 400);

  // call function

  drawChart();

}

​

function draw() {

  //title

  textFont(fontLimelight);

  textSize(30);

  textAlign(CENTER);

  text('A24 - Top 5 - 2023', 200, 40);

​

}

​

function drawChart() {

  background(0);

​

  // get rows from table containing distributor A24

  let rows = data.getRows();

  let a24Movies = rows.filter(row => row.getString('Distributor') === 'A24');

​

  // sort movies based on total gross in descending order

  a24Movies.sort((a, b) => {

    let grossA = a.getString('Total Gross');

    let grossB = b.getString('Total Gross');

    return parseFloat(grossB.replace(/[^\d.]/g, '')) - parseFloat(grossA.replace(/[^\d.]/g, ''));

  });

​

  // bar dimensions

  let barHeight = 40;

  let x = 50;

  let y = 90;

​

  // get top 5 movies from distributor and draw chart

  for (let i = 0; i < min(5, a24Movies.length); i++) {

    let movie = a24Movies[i];

    let title = movie.getString('Title');

    let totalGross = parseFloat(movie.getString('Total Gross').replace(/[^\d.]/g, ''));

​

    drawBarChart(i + 1, title, totalGross, x, y, barHeight);

​

    // distance from each bar

    y += barHeight + 20;

​

    // console log result

    console.log(`${i + 1}. ${title}: $${totalGross.toLocaleString()}`);

  }

}

​

function drawBarChart(rank, title, totalGross, x, y, barHeight) {

  // movie rank

  textSize(14);

  fill(255, 38, 38);

  textAlign(RIGHT, CENTER);

  text(rank, x - 10, y + barHeight / 2);

​

  // movie total gross

  textSize(12);

  fill(255, 197, 38);

  textAlign(LEFT, CENTER);

  text('$' + totalGross.toLocaleString(), x + totalGross / 10000000 + 10, y);

​

  // bar

  fill(38, 103, 255);

  rect(x, y, totalGross / 10000000, barHeight);

​

  // movie title

  textSize(12);

  fill(255);

  textAlign(LEFT, CENTER);

  text(title, x + totalGross / 10000000 + 15, y + barHeight / 2);

}