​

function preload() {

  grades = loadTable("./grades.csv", "csv", "header");

}

​

function setup() {

  createCanvas(400, 400);

  strokeWeight(45);

  strokeCap(SQUARE);

}

​

function draw() {

  background(0);

  for (let row = 0; row < grades.getRowCount(); row++) {

    for (let col = 0; col < grades.getColumnCount(); col++) {

      let x = 100 + row * 50;

      let grade = grades.getNum(row, "Grade");

      let green = map(grade, 0,100, 0, 255);

      strokeWeight(45);

      stroke(100,green,0);

      // optional way to visualize

      // line(x, grade, x, 0); 

      line(x, 250-grade, x, 250);

      strokeWeight(2);

      text(grade, x-5, 240 - grade);

      stroke(255);

      text(grades.getString(row, "Name"), x-5, 300 );

    }

  }

  noLoop();

}

​

​

​