Horizon chart

// Horizon chart — the answer to "I have 12 time series and one screen".
// The series is folded into N bands and each band overplotted at increasing
// saturation, so each row needs a fraction of the height a line chart would.
// Reading exact values is harder; spotting *when* things went wrong is much
// easier.

const BANDS = 3;
const rng = d3.randomLcg(5);
const names = ['orders', 'catalogue', 'payments', 'identity', 'search', 'pricing'];
// Every series is drawn BANDS times over, twice (above and below), through
// `curveBasis` — so the emitted path data grows as points × series × bands × 2.
// 6 × 80 keeps the SVG in the tens of KB; pushing both up an order of
// magnitude is what turns a horizon chart into a megabyte of <path>.
const points = 80;

const series = names.map((name, i) => ({
  name,
  values: d3.range(points).map(t =>
    30 * Math.sin((t + i * 14) / 11) + 18 * Math.sin(t / 4.5) + rng() * 14 - 7),
}));

const margin = { top: 34, right: 20, bottom: 20, left: 90 };
const rowHeight = 30;
const boxHeight = margin.top + series.length * (rowHeight + 3) + margin.bottom;

const x = d3.scaleLinear().domain([0, points - 1])
    .range([margin.left, width - margin.right]);
const maxAbs = d3.max(series, s => d3.max(s.values, Math.abs));
const y = d3.scaleLinear().domain([0, maxAbs / BANDS]).range([rowHeight, 0]);

const area = d3.area()
    .x((_, i) => x(i))
    .y0(rowHeight)
    .y1(d => y(d))
    .curve(d3.curveBasis);

const positive = d3.scaleSequential([-1, BANDS], d3.interpolateBlues);
const negative = d3.scaleSequential([-1, BANDS], d3.interpolateReds);

const svg = d3.select(container).append('svg')
    .attr('viewBox', [0, 0, width, boxHeight])
    .attr('width', width)
    .attr('height', boxHeight)
    .attr('font-family', 'system-ui, sans-serif')
    .attr('font-size', 11);

const row = svg.selectAll('g.row')
  .data(series)
  .join('g')
    .attr('class', 'row')
    .attr('transform', (_, i) => `translate(0,${margin.top + i * (rowHeight + 3)})`);

// One clip per row, or band 2 of a tall spike would bleed into the row above.
row.append('clipPath')
    .attr('id', (_, i) => `horizon-clip-${i}`)
  .append('rect')
    .attr('x', margin.left)
    .attr('y', 0)
    .attr('width', width - margin.left - margin.right)
    .attr('height', rowHeight);

row.each(function (s, rowIndex) {
  const g = d3.select(this).append('g')
      .attr('clip-path', `url(#horizon-clip-${rowIndex})`);

  for (let band = 0; band < BANDS; band++) {
    // Shift the series down by one band and redraw: what pokes above the
    // baseline is the part that exceeded that band.
    const shift = band * (maxAbs / BANDS);
    g.append('path')
        .attr('fill', positive(band))
        .attr('d', area(s.values.map(v => Math.max(0, v - shift))));
    g.append('path')
        .attr('fill', negative(band))
        .attr('d', area(s.values.map(v => Math.max(0, -v - shift))));
  }
});

row.append('text')
    .attr('x', margin.left - 12)
    .attr('y', rowHeight / 2)
    .attr('dy', '0.35em')
    .attr('text-anchor', 'end')
    .attr('fill', theme.foreground)
    .text(d => d.name);

svg.append('text')
    .attr('x', margin.left)
    .attr('y', 20)
    .attr('fill', theme.muted)
    .text(`error rate vs baseline · ${BANDS} bands · blue above, red below`);