03 · Drawn Line.

8–20 points on an even time axis. The reader's takeaway should be the direction and shape of the line — not any single value. Add a ↓ improving hint near the y-axis when "down is good" (wait times, error rates) so the reader doesn't misread a falling line as bad news.

The classic stroke-dasharray trick. Set stroke-dasharray equal to the path's total length and stroke-dashoffset to the same number — the line is fully hidden. Transition dashoffset to 0 over 1.6s and the line appears to draw itself, left to right. Dots pop in on a delay after the line arrives.

erWaitTrend: {
  title:    'ER median wait',
  values:   [52,48,44,40,36,32,28,24,20,17,14,12],
  yMin:     10,   // axis floor
  yMax:     60,   // axis ceiling
  weekLabels: ['W01', 'W06', 'W12'],
}

const dPath = points.map((p, i) =>
  i === 0 ? `M ${p[0]} ${p[1]}`
          : `L ${p[0]} ${p[1]}`
).join(' ');
path.setAttribute('d', dPath);
// ORDER MATTERS — see callout
const len = path.getTotalLength();
path.style.setProperty('--len', len);