{"spec_id":"recurrence-basic","library":"muix","language":"javascript","code":"// anyplot.ai\n// recurrence-basic: Recurrence Plot for Nonlinear Time Series\n// Library: muix 9.16.0 | JavaScript 22.23.3\n// Quality: 84/100 | Updated: 2026-10-23\n//# anyplot-orientation: square\n\nimport { ChartsContainer } from \"@mui/x-charts/ChartsContainer\";\nimport { ScatterPlot } from \"@mui/x-charts/ScatterChart\";\nimport { ChartsXAxis } from \"@mui/x-charts/ChartsXAxis\";\nimport { ChartsYAxis } from \"@mui/x-charts/ChartsYAxis\";\nimport { ChartsGrid } from \"@mui/x-charts/ChartsGrid\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Constants\nconst THRESHOLD = 0.15;\nconst DELAY_TAU = 5;\n\n// Columns: set these to your data's column names\nconst TIME = \"Time Index\"; // role: time\nconst VALUE = \"Signal Value\"; // role: value\n\n// Data: replace this block with your own records, one object per row\nconst data = (() => {\n  const n = 300;\n  const r = 3.95;\n  const ts: number[] = [0.4];\n  for (let i = 1; i < n; i++) {\n    ts.push(r * ts[i - 1] * (1 - ts[i - 1]));\n  }\n  return ts.map((v, i) => ({ [TIME]: i, [VALUE]: v }));\n})();\n\n// Plot: reads only data and the constants above\nconst M = data.length - DELAY_TAU;\nconst states = Array.from({ length: M }, (_, i) => [\n  data[i][VALUE],\n  data[i + DELAY_TAU][VALUE],\n]);\n\nconst recPts: { x: number; y: number; id: number }[] = [];\nlet ptId = 0;\nfor (let i = 0; i < M; i++) {\n  for (let j = 0; j < M; j++) {\n    const dx = states[i][0] - states[j][0];\n    const dy = states[i][1] - states[j][1];\n    if (dx * dx + dy * dy < THRESHOLD * THRESHOLD) {\n      recPts.push({ x: data[i][TIME], y: data[j][TIME], id: ptId++ });\n    }\n  }\n}\n\nconst minTime = data[0][TIME];\nconst maxTime = data[M - 1][TIME];\nconst TITLE_H = 56;\n\nexport default function Chart() {\n  const W = window.ANYPLOT_SIZE.width;\n  const H = window.ANYPLOT_SIZE.height;\n  const side = H - TITLE_H;\n\n  return (\n    <div\n      style={{\n        width: W,\n        height: H,\n        background: t.pageBg,\n        fontFamily: \"Inter, system-ui, sans-serif\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n      }}\n    >\n      <div\n        style={{\n          height: TITLE_H,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        <span style={{ fontSize: 22, fontWeight: 600, color: t.ink }}>\n          recurrence-basic · javascript · muix · anyplot.ai\n        </span>\n      </div>\n      <ChartsContainer\n        width={side}\n        height={side}\n        skipAnimation\n        colors={[t.palette[0]]}\n        margin={{ top: 24, bottom: 24, left: 20, right: 28 }}\n        series={[\n          {\n            type: \"scatter\",\n            data: recPts,\n            markerSize: 2,\n            label: \"Recurrent\",\n          },\n        ]}\n        xAxis={[\n          {\n            min: minTime,\n            max: maxTime,\n            height: 72,\n            label: `${TIME} i`,\n            tickLabelStyle: { fontSize: 15, fill: t.inkSoft },\n            labelStyle: { fontSize: 15, fill: t.ink },\n          },\n        ]}\n        yAxis={[\n          {\n            min: minTime,\n            max: maxTime,\n            width: 72,\n            label: `${TIME} j`,\n            tickLabelStyle: { fontSize: 15, fill: t.inkSoft },\n            labelStyle: { fontSize: 15, fill: t.ink },\n          },\n        ]}\n        sx={{\n          \"& .MuiChartsAxis-line\": { stroke: t.inkSoft },\n          \"& .MuiChartsAxis-tick\": { stroke: t.inkSoft },\n          \"& .MuiChartsGrid-line\": { stroke: t.grid, strokeWidth: 1 },\n        }}\n      >\n        <ChartsGrid vertical horizontal />\n        <ScatterPlot />\n        <ChartsXAxis />\n        <ChartsYAxis />\n      </ChartsContainer>\n    </div>\n  );\n}\n"}