​

function preload() {

  dataset = loadTable("data.csv", "csv", "header");

}

​

function setup() {

  createCanvas(1920, 1080);

  smooth();

}

​

function draw() {

  background(64, 83, 137);

  drawBarGraph();

}

​

function drawBarGraph() {

  let values = dataset.getColumn(3);

​

  // calculate the highest and lowest value from

  // our list (or array) of values

  let minValue = min(values); //minimum value from all values

  let maxValue = max(values); //maximum value from all values

​

  // for convenience we store the number of

  // elements inside array values in a variable n

  let n = values.length;

​

  // now we can draw

  // our line-graph

  push();

​

  // play with the position the graph

  translate(400, 400);

​

  // size of the graph

  let h = 900;

  let w = 1200;

  let thickness = 40;

  let spacing = (w - thickness) / (n - 6);

​

​

  // @make-changes-here

  // color setting for

  // the bar graph

  noStroke();

  let c0 = color(223, 223, 223);

  let c1 = color(30, 95, 23);

  fill(c0);

​

  // we need to vertical-flip the

  // bar graph first so that it is

  // properly displayed.

  translate(0, h);

  // scale(1,-1);

​

  let x = 0;

  let y = 0;

  let minMax = 10;

  //bars

​

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

    let v = float(values[i]);

    x = i * spacing;

    y = map(v, minValue, maxValue, -minMax, -h + minMax);

​

    // un-comment the next command to use the lerpColor,

    // which blends two colors to find a third color

    // somewhere between them.

    fill(lerpColor(c1,c0,map(v, minValue, maxValue,0,1)));

​

    rect(x, 0, thickness, y);

​

    push();

    translate(x,10);

    rotate(0.71);

    text(nfs(v,0,1),0,0);

    pop();

  }

​

  pop();

}

​