Marimekko Chart in HTML, CSS and JavaScript

const regions = [['North', 42, [38, 27, 21, 14]], ['South', 30, [22, 35, 25, 18]]];
const colors = ['#e76f51', '#2a9d8f', '#e9c46a', '#9aa5b5'];
const total = regions.reduce((a, r) => a + r[1], 0);
let x = 40;

regions.forEach(([name, size, shares]) => {
  const w = size / total * 520;
  let y = 280;
  shares.forEach((pct, i) => {
    const h = pct / 100 * 260;
    drawRect(x, y - h, w - 3, h - 1, colors[i]);
    y -= h;
  });
  drawText(x + w / 2, 298, name, 'middle');
  x += w;
});

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;
}