​

function preload(){

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

}

​

function setup() {

  createCanvas(400, 400);

  strokeCap(SQUARE);

}

​

function draw() {

  background(0);

  strokeWeight(45);

  // console.log('columns ', grades.getColumn('Name'))

  // console.log('number of rows ',grades.getRowCount());

  // console.log('number of columns ',grades.getColumnCount());

  // console.log('student ID,name and grade', grades.getString(0,'ID'), grades.getString(0,'Name'), grades.getString(0,'Score'))

​

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

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

      // console.log(grades.getString(r, c));

      let x = 100 + r * 50;

      let g = map(grades.getString(r, 'Grade'), 0,100,0,255);

      // gets lighter as the score increases

      stroke(100,g,0);

      strokeWeight(45);

      line(x, 250, x, 250-grades.getString(r, "Grade"));

      stroke(200);

      fill(200);

      strokeWeight(1);

      text(grades.getString(r, "Name"),x, 300);

      text(grades.getString(r, "Grade"),x, 130);

    }

  }

​

  noLoop();

}

​