{"spec_id":"recurrence-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// recurrence-basic: Recurrence Plot for Nonlinear Time Series\n// Library: highcharts 12.6.0 | JavaScript 22.22.3\n// Quality: 88/100 | Created: 2026-06-10\n\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Logistic map in chaotic regime (r = 3.82, x0 = 0.4)\nconst N = 200;\nconst r = 3.82;\nconst ts = new Array(N);\nts[0] = 0.4;\nfor (let i = 1; i < N; i++) {\n    ts[i] = r * ts[i - 1] * (1 - ts[i - 1]);\n}\n\n// Time-delay embedding: dimension d=2, delay tau=1\n// Embedded vector at index i: [ts[i], ts[i+1]]\nconst M = N - 1;\nconst emb = new Array(M);\nfor (let i = 0; i < M; i++) {\n    emb[i] = [ts[i], ts[i + 1]];\n}\n\n// Binary recurrence matrix: mark (i,j) where Euclidean distance < epsilon\nconst eps = 0.15;\nconst epsSq = eps * eps;\nconst recData = [];\nfor (let i = 0; i < M; i++) {\n    for (let j = 0; j < M; j++) {\n        const dx = emb[i][0] - emb[j][0];\n        const dy = emb[i][1] - emb[j][1];\n        if (dx * dx + dy * dy < epsSq) {\n            recData.push([i, j]);\n        }\n    }\n}\n\n// Chart\nconst chart = Highcharts.chart(\"container\", {\n    chart: {\n        type: \"scatter\",\n        backgroundColor: \"transparent\",\n        animation: false,\n        style: { fontFamily: \"inherit\" },\n        spacing: [20, 20, 20, 20],\n        plotBorderWidth: 0\n    },\n    credits: { enabled: false },\n    colors: t.palette,\n    title: {\n        text: \"recurrence-basic · javascript · highcharts · anyplot.ai\",\n        style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" }\n    },\n    subtitle: {\n        text: \"Diagonal lines = determinism · block structures = regime changes (logistic map, r = 3.82)\",\n        style: { color: t.inkSoft, fontSize: \"13px\" }\n    },\n    xAxis: {\n        title: {\n            text: \"Time Index i\",\n            style: { color: t.inkSoft, fontSize: \"16px\" }\n        },\n        lineColor: t.inkSoft,\n        tickColor: t.inkSoft,\n        gridLineColor: t.grid,\n        labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n        min: 0,\n        max: M - 1,\n        endOnTick: false\n    },\n    yAxis: {\n        title: {\n            text: \"Time Index j\",\n            style: { color: t.inkSoft, fontSize: \"16px\" }\n        },\n        lineColor: t.inkSoft,\n        tickColor: t.inkSoft,\n        gridLineColor: t.grid,\n        labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n        min: 0,\n        max: M - 1,\n        endOnTick: false\n    },\n    legend: { enabled: false },\n    tooltip: { enabled: false },\n    plotOptions: {\n        series: { animation: false },\n        scatter: {\n            turboThreshold: 100000,\n            marker: {\n                radius: 2,\n                symbol: \"square\",\n                states: { hover: { enabled: false } }\n            }\n        }\n    },\n    series: [{\n        name: \"Recurrent\",\n        data: recData,\n        color: t.palette[0]\n    }]\n});\n\n// Overlay the main diagonal (i = j) using Highcharts SVG renderer.\n// The self-recurrence line anchors the viewer and highlights deterministic structure.\nconst ax = chart.xAxis[0];\nconst ay = chart.yAxis[0];\nchart.renderer.path([\n    \"M\", ax.toPixels(0), ay.toPixels(0),\n    \"L\", ax.toPixels(M - 1), ay.toPixels(M - 1)\n]).attr({\n    \"stroke-width\": 3,\n    stroke: t.amber,\n    opacity: 0.85,\n    zIndex: 5\n}).add(chart.seriesGroup);\n"}