listing-3.js

var bgcolors = ["#f7a7a7", "#d0f7a7", "#f7d6a7", "#a7e2f7", "#e7bafb", "#fbbadc", "#def5d1", "#f7f1a7", "#b5fdd6", "#fb9387"]; //put some nice background colors here for our boxes
var crow = 0;      // current row. not the bird :)
var boxes = [];    // the array that contains all box definitions

lines.filter(e=>e) // filter out zero length lines
  .forEach(function(e) {
  o = e.map((x,i,a) => a.filter((y,j) => j<i).reduce((s,z) => s+Math.abs(z),1)); //get start columns of boxes
  e.forEach(function(x,i) {
    var f = boxes.filter(b => b.col===o[i] && b.opn); // are there open boxes at this column offset?
    if (x>0) {      // +ve number means... 
      if (f.length) {
        f.map(b => b.hgt++); // ...add one more row to open boxes at this column offset
      } else { // no open boxes exist at this column offset. start a new box
        n = {row: crow, col:o[i], wid:x, hgt: 1, clr: bgcolors[boxes.length%bgcolors.length], opn: true}
        boxes.push(n);
      }
    } else {
      f.map(b => ++b.hgt && --b.opn); // -ve number means: close open boxes at this column offset
    }
  });
  crow++; // increment current row
});