​

function preload() {

  // preload our data from our .csv file

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

}

​

function setup() {

  // if you add SVG as 3rd parameter and then

  // press s, the canvas will be saved as SVG file

  createCanvas(windowWidth, windowHeight,SVG);

  smooth();

}

​

function draw() {

  //background(140);

​

  let d0 = dataset; // raw dataset

  let d1 = dataset.sortByColumn(1, DESC); // sorted dataset

  let d2 = dataset.sortByColumn(2, DESC); //

  // draw a dataset

  // there are a range of properties that can be set

  // to apply custom settings to a graph, see the 

  // drawBarGraph for more details, otherwise, the 

  // naming convention below should be self-explanatory

  drawBarGraph({

    dataset: d0, 

    column: 1, 

    x: 100,

    y: 100,

    h: 200,

    w: 400,

    thickness: 4,

    isLabel: true,

    isBackground: true,

    fg: color(200, 200, 200),

    //bg: color(40, 100),

    //lc: color(255),

  });

​

  drawBarGraph({

    dataset: d1, 

    column: 1, 

    x: 105,

    y: 100,

    h: 200,

    w: 400,

    thickness: 4,

    isLabel: false,

    isBackground: false,

    fg: color(255, 200, 20),

    //bg: color(40, 100),

    //lc: color(255),

  });

  drawBarGraph({

    dataset: d2, 

    column: 1, 

    x: 110,

    y: 100,

    h: 200,

    w: 400,

    thickness: 4,

    isLabel: false,

    isBackground: false,

    fg: color(0),

    //bg: color(40, 100),

    //lc: color(255),

  });

}

​

function drawBarGraph(theProps = {}) {

  let values = theProps.dataset.getColumn(theProps.column);

  let n = values.length;

  let x = theProps.x || 0;

  let y = theProps.y || 0;

  let h = theProps.h || 200;

  let w = theProps.w || 400;

  let thickness = theProps.thickness || 10;

  let isLabel = theProps.isLabel || false;

  let isBackground = theProps.isBackground || false;

  let orientation = theProps.orientation || 0;

​

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

  let fg = theProps.fg || color(255, 255, 200);

  let bg = theProps.bg || color(40, 200);

  let lc = theProps.lc || fg;

  let minValue = min(values);

  let maxValue = max(values);

​

  // now we can draw

  // our line-graph

  push();

  translate(x,y);

  // background

  if (isBackground == true) {

    fill(bg);

    noStroke();

    rect(0, 0, w, h);

  }

​

  // we need to vertical-flip the

  // bar graph first so that it is

  // properly displayed.

  // translate(0, h);

  // scale(1,-1);

​

  let marginTopBottom = 10;

​

  // and now we can render

  // the bars for our bar graph

​

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

    let v = float(values[i]);

    x = i * spacing;

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

​

    noStroke();

    fill(fg);

    rect(x, h, thickness, y);

​

    if (isLabel == true) {

      noStroke();

      fill(lc);

      push();

      translate(x, h + 10);

      rotate(0.75);

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

      pop();

    }

  }

​

  pop();

}

​

​

// if you want to use the SVG export 

// option, go to setup and enable SVG mode

function keyPressed() {

  if (key === "s") {

    saveSVG("bar-graph.svg");

  }

}

​

​

​

​

​

​

////////////////////////////////////////////////////

//

// Helper function and constant variables

// no need to make any changes below.

//

////////////////////////////////////////////////////

​

const DESC = -1;

const ASC = 1;

​

p5.Table.prototype.sortByColumn = function (theColumnId, theDir = -1) {

  let data = [];

  let len = this.getRowCount();

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

    let o = [];

    for (let j = 0; j < this.getColumnCount(); j++) {

      let v = this.getColumn(j)[i];

      if (!isNaN(v)) {

        if (v.toString().indexOf(".") != -1) {

          v = parseFloat(v);

        } else {

          v = parseInt(v);

        }

      }

      o.push(v);

    }

    data.push(o);

  }

​

  data.sort((a, b) => a[theColumnId] * theDir - b[theColumnId] * theDir);

​

  let table = new p5.Table();

  this.columns.forEach((el) => table.addColumn(el));

  data.forEach((el, i) => {

    table.addRow();

    el.forEach((v, j) => {

      if (!isNaN(v)) {

        if (v.toString().indexOf(".") != -1) {

          v = parseFloat(v);

        } else {

          v = parseInt(v);

        }

        table.setNum(i, j, v);

      } else {

        table.setString(i, j, v);

      }

    });

  });

  return table;

};

​

​

​