| 17 | }; |
| 18 | |
| 19 | const createZoomyLineData = (count: number): ReadonlyArray<DataPoint> => { |
| 20 | const n = Math.max(2, Math.floor(count)); |
| 21 | const out: DataPoint[] = new Array(n); |
| 22 | |
| 23 | // Sorted increasing x by construction. |
| 24 | // Make high-frequency detail that becomes obvious once you zoom in (more points kept), |
| 25 | // plus occasional spikes that are easy to spot at high zoom. |
| 26 | const spikeCenters = [12_500, 31_000, 48_000, 66_500, 84_250]; |
| 27 | const spikeSigma = 34; // narrow spike in index units |
| 28 | |
| 29 | for (let i = 0; i < n; i++) { |
| 30 | const x = i; |
| 31 | |
| 32 | const slow = Math.sin(i * 0.0014) * 1.2 + Math.sin(i * 0.00017 + 1.1) * 0.6; |
| 33 | const hf = Math.sin(i * 0.085) * 0.25 + Math.sin(i * 0.17 + 0.4) * 0.12; |
| 34 | |
| 35 | let spike = 0; |
| 36 | for (const c of spikeCenters) { |
| 37 | const d = i - c; |
| 38 | spike += 6.5 * Math.exp(-(d * d) / (2 * spikeSigma * spikeSigma)); |
| 39 | } |
| 40 | |
| 41 | out[i] = [x, slow + hf + spike] as const; |
| 42 | } |
| 43 | |
| 44 | return out; |
| 45 | }; |
| 46 | |
| 47 | const attachCoalescedResizeObserver = ( |
| 48 | containers: ReadonlyArray<HTMLElement>, |