Streamgraph

// Streamgraph — a stacked area with a wiggle baseline.
// Good for how a *mix* shifts over time; bad for reading any single value,
// because no series sits on a fixed axis. Use a stacked area if the absolute
// numbers matter.

const keys = ['Orders', 'Catalogue', 'Search', 'Payments', 'Identity'];
const rng = d3.randomLcg(11);
const series = d3.range(0, 36).map(month => {
  const row = { month };
  keys.forEach((k, i) => {
    // A slow sine per series plus seeded noise, so the shape has structure
    // rather than looking like static.
    row[k] = Math.max(2, 40 + 30 * Math.sin((month + i * 6) / 5) + rng() * 18);
  });
  return row;
});

const margin = { top: 20, right: 130, bottom: 34, left: 20 };
const stacked = d3.stack()
    .keys(keys)
    .offset(d3.stackOffsetWiggle)
    .order(d3.stackOrderInsideOut)(series);

const x = d3.scaleLinear()
    .domain(d3.extent(series, d => d.month))
    .range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
    .domain([d3.min(stacked, s => d3.min(s, d => d[0])), d3.max(stacked, s => d3.max(s, d => d[1]))])
    .range([height - margin.bottom, margin.top]);

const color = d3.scaleOrdinal(keys, theme.palette);
const area = d3.area()
    .x(d => x(d.data.month))
    .y0(d => y(d[0]))
    .y1(d => y(d[1]))
    .curve(d3.curveBasis);

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

svg.append('g')
  .selectAll('path')
  .data(stacked)
  .join('path')
    .attr('d', area)
    .attr('fill', d => color(d.key))
    .attr('fill-opacity', 0.9);

svg.append('g')
    .attr('transform', `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).ticks(6).tickFormat(d => `M${d}`))
    .call(g => g.select('.domain').remove())
    .call(g => g.selectAll('text').attr('fill', theme.muted))
    .call(g => g.selectAll('line').attr('stroke', theme.muted));

const legend = svg.append('g')
    .attr('transform', `translate(${width - margin.right + 16},${margin.top})`);
legend.selectAll('g')
  .data(keys)
  .join('g')
    .attr('transform', (_, i) => `translate(0,${i * 18})`)
    .call(g => g.append('rect')
        .attr('width', 11).attr('height', 11).attr('rx', 2)
        .attr('fill', d => color(d)))
    .call(g => g.append('text')
        .attr('x', 16).attr('y', 9)
        .attr('fill', theme.foreground).text(d => d));