let scores = [];

let barWidths = []; // Array to store the current width of each bar

let growingSpeed = 2; // Speed at which the bars expand

​

function preload() {

  table = loadTable('top100players.csv', 'csv', 'sheet1');

}

​

function setup() {

  createCanvas(600, 2100);

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

    players[i] = table.rows[i].arr[5];

    scores[i] = table.rows[i].arr[12];

    barWidths[i] = 0; // Initialize the bar widths to zero

  }

}

​

function draw() {

  background(0, 0, 20);

  let maxScore = max(scores);

  textAlign(CENTER);

  textSize(16);

  text("2016 GUARDIAN WORLD'S TOP 100 FOOTBALLERS VOTING", width / 2, 20);

​

  let barHeight = 15; // Height of each bar

  let spacing = 5; // Spacing between bars

  let startY = 50; // Starting y position for the bars

  let labelX = 150; // X position for labels

​

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

    // Gradually increase the bar width

    barWidths[i] += growingSpeed;

    // Ensure the bar width doesn't exceed the mapped width

    barWidths[i] = min(barWidths[i], map(scores[i], 0, maxScore, 0, width - labelX - 370));

​

    // Calculate the y position of the bar

    let y = startY + i * (barHeight + spacing);

    let labelY = y + barHeight / 2;

​

    // Draw the bar

    fill(100, 100, 255);

    rect(labelX, y, barWidths[i], barHeight);

​

    // Display the player's name to the left of the bar

    fill(255);

    textSize(12);

    textAlign(RIGHT, CENTER);

    text(players[i], labelX - 10, labelY);

​

    // Display the player's score to the right of the bar

    fill(255);

    textSize(12);

    textAlign(LEFT, CENTER);

    text(scores[i], labelX + barWidths[i] + 10, labelY);

  }

}

​