Function makeCartesianData

examples/data-update-animation/main.ts:50–77

(
  count: number,
  rng: () => number,
  params: Readonly<{ phase: number; amplitude: number; offset: number }>
)

];

const makeCartesianData = (
  count: number,
  rng: () => number,
  params: Readonly<{ phase: number; amplitude: number; offset: number }>
): Readonly<{ bars: ReadonlyArray<DataPoint>; line: ReadonlyArray<DataPoint> }> => {
  const n = Math.max(8, Math.floor(count));
  const bars: DataPoint[] = new Array(n);
  const line: DataPoint[] = new Array(n);

  const twoPi = Math.PI * 2;
  for (let i = 0; i < n; i++) {
    const t = i / (n - 1);
    const x = i;
    const noise = (rng() - 0.5) * 0.18;

    // Keep x stable (match-by-index); change y so update animation is obvious.
    const yLine = params.offset + Math.sin(t * twoPi + params.phase) * params.amplitude + noise;
    const yBar =
      params.offset * 0.4 +
      Math.cos(t * twoPi * 0.75 + params.phase * 0.6) * (params.amplitude * 0.9) +
      (rng() - 0.5) * 0.35;

    line[i] = [x, yLine] as const;
    bars[i] = [x, yBar] as const;
  }

  return { bars, line };
};

const makePieData = (rng: () => number): ReadonlyArray<PieDataItem> => {
  return pieSliceBase.map((s) => {