Multi-line

// Multi-line time series with labels at the line ends rather than a
// legend — the reader never has to match a colour swatch to a line.

const rng = d3.randomLcg(17);
const names = ['orders', 'catalogue', 'payments', 'identity'];
const start = new Date(Date.UTC(2026, 0, 1));
const days = d3.utcDay.range(start, d3.utcDay.offset(start, 120));

const series = names.map((name, i) => ({
  name,
  values: days.map((date, t) => ({
    date,
    value: Math.max(1, 60 + i * 25 + 22 * Math.sin((t + i * 9) / 13) + rng() * 12 - 6),
  })),
}));

const margin = { top: 48, right: 96, bottom: 40, left: 56 };

const x = d3.scaleUtc()
    .domain(d3.extent(days))
    .range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
    .domain([0, d3.max(series, s => d3.max(s.values, v => v.value))]).nice()
    .range([height - margin.bottom, margin.top]);
const color = d3.scaleOrdinal(names, theme.palette);

const line = d3.line()
    .x(d => x(d.date))
    .y(d => y(d.value))
    .curve(d3.curveMonotoneX);

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')
    .attr('transform', `translate(${margin.left},0)`)
    .call(d3.axisLeft(y).ticks(6))
    .call(g => g.select('.domain').remove())
    .call(g => g.selectAll('text').attr('fill', theme.muted))
    .call(g => g.selectAll('line')
        .attr('stroke', theme.muted).attr('stroke-opacity', 0.22)
        .attr('x2', width - margin.left - margin.right));

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

svg.append('g')
    .attr('fill', 'none')
    .attr('stroke-width', 2)
  .selectAll('path')
  .data(series)
  .join('path')
    .attr('stroke', d => color(d.name))
    .attr('d', d => line(d.values));

svg.append('g')
  .selectAll('text')
  .data(series)
  .join('text')
    .attr('x', width - margin.right + 8)
    .attr('y', d => y(d.values[d.values.length - 1].value))
    .attr('dy', '0.35em')
    .attr('fill', d => color(d.name))
    .attr('font-weight', 600)
    .text(d => d.name);

svg.append('text')
    .attr('x', margin.left)
    .attr('y', 24)
    .attr('fill', theme.foreground)
    .attr('font-size', 13)
    .attr('font-weight', 600)
    .text('Requests per second by service');