Histogram in HTML, CSS and JavaScript

const minutes = [22.4, 18.9, 31.2, 26.5, 24.1, 41.8, 19.7, 27.3, 23.0, 35.6];
const binWidth = 5, from = 10, to = 50;
const bins = [];
for (let b = from; b < to; b += binWidth) bins.push(minutes.filter(v => v >= b && v < b + binWidth).length);
const max = Math.max(...bins), barW = 560 / bins.length;

bins.forEach((count, i) => {
  const h = count / max * 250;
  drawRect(40 + i * barW, 280 - h, barW - 1, h, '#f08a6c');
});

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