{"spec_id":"scatter-lag","library":"echarts","language":"javascript","code":"// anyplot.ai\n// scatter-lag: Lag Plot for Time Series Autocorrelation Diagnosis\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 90/100 | Created: 2026-06-24\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data: synthetic AR(1) process (deterministic LCG + Box-Muller) ---\nlet lcgState = 42 >>> 0;\nconst lcg = () => { lcgState = (lcgState * 1664525 + 1013904223) >>> 0; return lcgState / 0x100000000; };\nconst randn = () => Math.sqrt(-2 * Math.log(Math.max(lcg(), 1e-10))) * Math.cos(2 * Math.PI * lcg());\n\nconst phi = 0.82;\nconst n = 250;\nconst ts = [randn() * 2];\nfor (let i = 1; i < n; i++) ts.push(phi * ts[i - 1] + randn());\n\n// Lag-1 pairs: x = y(t), y-axis = y(t+1)\nconst lag = 1;\nconst xVals = ts.slice(0, n - lag);\nconst yVals = ts.slice(lag);\nconst m = xVals.length; // 249\n\n// Pearson correlation coefficient\nconst mX = xVals.reduce((a, b) => a + b, 0) / m;\nconst mY = yVals.reduce((a, b) => a + b, 0) / m;\nlet num = 0, dX = 0, dY = 0;\nfor (let i = 0; i < m; i++) {\n    const dx = xVals[i] - mX, dy = yVals[i] - mY;\n    num += dx * dy; dX += dx * dx; dY += dy * dy;\n}\nconst r = num / Math.sqrt(dX * dY);\n\nconst allVals = xVals.concat(yVals);\nconst rawMin = Math.min(...allVals);\nconst rawMax = Math.max(...allVals);\nconst pad = (rawMax - rawMin) * 0.05;\n// Round to clean integers so ECharts doesn't display raw float ticks at the axis edges\nconst minV = Math.floor(rawMin - pad);\nconst maxV = Math.ceil(rawMax + pad);\n\n// Third dimension drives visualMap color (time index → temporal structure)\nconst scatterData = xVals.map((xi, i) => [xi, yVals[i], i]);\n\n// --- Init ---\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option ---\nchart.setOption({\n    animation: false,\n    backgroundColor: \"transparent\",\n    title: {\n        text: \"scatter-lag · javascript · echarts · anyplot.ai\",\n        subtext: \"AR(1) process · lag k = 1 · n = \" + m + \" pairs\",\n        left: \"center\",\n        top: 20,\n        textStyle: { color: t.ink, fontSize: 22, fontWeight: \"normal\" },\n        subtextStyle: { color: t.inkSoft, fontSize: 14 }\n    },\n    grid: { left: 100, right: 160, top: 115, bottom: 90 },\n    xAxis: {\n        type: \"value\",\n        name: \"y(t)\",\n        nameLocation: \"middle\",\n        nameGap: 50,\n        nameTextStyle: { color: t.inkSoft, fontSize: 16 },\n        axisLabel: { color: t.inkSoft, fontSize: 14 },\n        axisLine: { show: true, lineStyle: { color: t.inkSoft } },\n        splitLine: { lineStyle: { color: t.grid } },\n        min: minV,\n        max: maxV\n    },\n    yAxis: {\n        type: \"value\",\n        name: \"y(t + 1)\",\n        nameLocation: \"middle\",\n        nameGap: 60,\n        nameTextStyle: { color: t.inkSoft, fontSize: 16 },\n        axisLabel: { color: t.inkSoft, fontSize: 14 },\n        axisLine: { show: true, lineStyle: { color: t.inkSoft } },\n        splitLine: { lineStyle: { color: t.grid } },\n        min: minV,\n        max: maxV\n    },\n    visualMap: {\n        type: \"continuous\",\n        min: 0,\n        max: m - 1,\n        dimension: 2,\n        inRange: { color: t.seq },\n        show: true,\n        right: 20,\n        top: \"center\",\n        orient: \"vertical\",\n        itemHeight: 180,\n        itemWidth: 16,\n        text: [\"Later\", \"Earlier\"],\n        textStyle: { color: t.inkSoft, fontSize: 13 }\n    },\n    series: [\n        {\n            type: \"line\",\n            data: [[minV, minV], [maxV, maxV]],\n            symbol: \"none\",\n            silent: true,\n            lineStyle: { color: t.inkSoft, type: \"dashed\", opacity: 0.55, width: 2 },\n            emphasis: { disabled: true }\n        },\n        {\n            type: \"scatter\",\n            data: scatterData,\n            symbolSize: 9,\n            itemStyle: {\n                opacity: 0.75,\n                borderColor: t.pageBg,\n                borderWidth: 0.5\n            }\n        }\n    ],\n    graphic: [\n        {\n            type: \"text\",\n            right: 170,\n            bottom: 105,\n            style: {\n                text: \"r = \" + r.toFixed(3),\n                fill: t.ink,\n                fontSize: 18,\n                fontWeight: \"bold\"\n            }\n        }\n    ]\n});\n"}