Icicle Chart in HTML, CSS and JavaScript

const tree = [['Photos', [['Family', 58], ['Travel', 31]]], ['Videos', [['Home videos', 61], ['Downloads', 23]]]];
const total = tree.reduce((a, [, kids]) => a + kids.reduce((s, k) => s + k[1], 0), 0);
const h = 300, colW = 180;
let y = 0;

drawRect(0, 0, colW - 2, h, '#16202c');                       // the whole
tree.forEach(([name, kids]) => {
  const size = kids.reduce((s, k) => s + k[1], 0);
  drawRect(colW, y, colW - 2, size / total * h - 2, '#3a6ea5'); // folder
  let ky = y;
  kids.forEach(([, v]) => { drawRect(colW * 2, ky, colW - 2, v / total * h - 2, '#7fa3cc'); ky += v / total * h; });
  y += size / total * h;
});

const svg = document.querySelector('svg');
function make(tag, attrs) {
  const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (const k in attrs) n.setAttribute(k, attrs[k]);
  svg.appendChild(n);
  return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
  return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
  const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
  t.textContent = str;
  return t;
}