{"spec_id":"scatter-lag","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// scatter-lag: Lag Plot for Time Series Autocorrelation Diagnosis\n// Library: highcharts 12.6.0 | JavaScript 22.22.3\n// Quality: 91/100 | Created: 2026-06-24\n\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Deterministic LCG for reproducible synthetic data (seed = 42)\nlet _s = 42;\nfunction rng() {\n  _s = (_s * 1664525 + 1013904223) >>> 0;\n  return _s / 4294967295;\n}\n\n// AR(1) time series: y(t) = phi * y(t-1) + epsilon\nconst nObs = 200;\nconst phi = 0.8;\nconst ts = [0.0];\nfor (let i = 1; i < nObs; i++) {\n  ts.push(phi * ts[i - 1] + (rng() - 0.5) * 4);\n}\n\n// Lag-1 scatter: x = y(t), y = y(t + 1)\nconst lag = 1;\nconst xVals = ts.slice(0, nObs - lag);\nconst yVals = ts.slice(lag);\nconst nPairs = xVals.length;\n\n// Pearson lag-1 autocorrelation coefficient r\nconst mx  = xVals.reduce((a, b) => a + b, 0) / nPairs;\nconst my  = yVals.reduce((a, b) => a + b, 0) / nPairs;\nconst num = xVals.reduce((s, x, i) => s + (x - mx) * (yVals[i] - my), 0);\nconst dx  = Math.sqrt(xVals.reduce((s, x) => s + (x - mx) ** 2, 0));\nconst dy  = Math.sqrt(yVals.reduce((s, y) => s + (y - my) ** 2, 0));\nconst r   = (num / (dx * dy)).toFixed(3);\n\n// Diagonal reference line extent\nconst vMin = Math.floor(Math.min(...xVals, ...yVals));\nconst vMax = Math.ceil(Math.max(...xVals, ...yVals));\n\n// Interpolate between two #RRGGBB hex colors by fraction 0..1\nfunction hexToRgb(hex) {\n  return [parseInt(hex.slice(1, 3), 16), parseInt(hex.slice(3, 5), 16), parseInt(hex.slice(5, 7), 16)];\n}\nfunction lerpColor(c1, c2, frac) {\n  const [r1, g1, b1] = hexToRgb(c1);\n  const [r2, g2, b2] = hexToRgb(c2);\n  return `rgb(${Math.round(r1 + (r2 - r1) * frac)},${Math.round(g1 + (g2 - g1) * frac)},${Math.round(b1 + (b2 - b1) * frac)})`;\n}\n\n// Color each lag pair by temporal position using imprint_seq: early (seq[0]) → late (seq[1])\nconst scatterPts = xVals.map((x, i) => ({\n  x: +x.toFixed(3),\n  y: +yVals[i].toFixed(3),\n  color: lerpColor(t.seq[0], t.seq[1], i / (nPairs - 1))\n}));\n\nHighcharts.chart(\"container\", {\n  chart: {\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n    plotBorderWidth: 0\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n\n  title: {\n    text: \"scatter-lag · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" }\n  },\n  subtitle: {\n    text: \"Temperature Anomaly — AR(1), φ = \" + phi + \" · Lag k = \" + lag + \" · r = \" + r + \" · Color: temporal order (early → late)\",\n    style: { color: t.inkSoft, fontSize: \"14px\" }\n  },\n\n  xAxis: {\n    title: {\n      text: \"y(t) — anomaly at time t (°C)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" }\n    },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    gridLineWidth: 1,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } }\n  },\n  yAxis: {\n    title: {\n      text: \"y(t + 1) — anomaly at next step (°C)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" }\n    },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    gridLineWidth: 1,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } }\n  },\n\n  legend: {\n    enabled: true,\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink }\n  },\n\n  plotOptions: {\n    series: { animation: false },\n    scatter: {\n      marker: {\n        radius: 5,\n        symbol: \"circle\",\n        lineWidth: 1,\n        lineColor: t.pageBg\n      },\n      opacity: 0.62\n    },\n    line: {\n      marker: { enabled: false },\n      enableMouseTracking: false\n    }\n  },\n\n  series: [\n    {\n      name: \"Lag-1 observations\",\n      type: \"scatter\",\n      data: scatterPts,\n      color: t.palette[0],  // legend marker; individual points use imprint_seq gradient\n      zIndex: 2\n    },\n    {\n      name: \"y = x (reference)\",\n      type: \"line\",\n      data: [[vMin, vMin], [vMax, vMax]],\n      color: t.inkSoft,\n      dashStyle: \"ShortDash\",\n      lineWidth: 2,\n      zIndex: 1\n    }\n  ]\n});\n"}