2c:null 2d:["$","title",null,{"children":"kNN in Strange Attractors | Adrian's Workspace | Observable"}] 32:Te1e,Delay embedding methods are an important tool in the field of nonlinear time series analysis and prediction. However, the choice of embedding parameters can have a large impact on the resulting analysis. This has led to the development of a variety of methods that can be used to optimize the selection of parameters such as the embedding delay. This notebook aims at visualizing the most commonly used procedure to find close by neighbors in a reconstructed state space. A time series ${tex`x(t) \in \mathbb{R}`} can be viewed as a consequence of a data generating process of - in the best case - equidistantly sampled observations over time of some dynamical process with state ${tex`\mathbf{s}(t) \in \mathbb{R}^m`} via a measurement function ${tex`h : \mathbb{R}^{m} \rightarrow \mathbb{R}^{n}`}, where in most cases ${tex`m < n`} as the full state of the dynamical process is seldomly known. ## Embedding Theory For a given dynamical system with state ${tex`\mathbf{s}(t)`}, which dynamics evolve in the state space ${tex`\mathcal{S} \subset \mathbb{R}^d`}, with ${tex`d`} indicating euclidean space, the temporal evolution of the dynamical system is described by ${tex.block`{\mathbf{s}(t + \Delta t) = f_t(\mathbf{s}(t)).}`} The measurement function ${tex`h : \mathbb{R}^{d} \rightarrow \mathbb{R}`} that observes the system can then produce a time series: ${tex.block`{x(t) = h(\mathbf{s}(t)).}`} An embedding can then be defined as the transformation ${tex`\Psi : \mathbb{R} \rightarrow \mathbb{R}^E`} that portrays the dimensions of the time series. In this notebook, we want to concentrate on uniform delay embeddings. First described by Packard et al., and proven by Taken's time delay embeddings portrays a scalar time series into a higher dimension by construction of delay vectors ${tex`\mathbf{x}(t)`} of a single time series, where ${tex.block`{\mathbf{x}(t) = [x(t), x(t-\tau),...,x(t-(E-1)\tau)],}`} with ${tex`\tau`} and ${tex`E`} being embedding parameters. Note that with uniform embeddings, ${tex`\tau`} and ${tex`E`} are fixed. According to Taken's, if ${tex`x(t)`} is in fact part of the dynamical system, the collection of all embedding vectors ${tex`\mathbf{x}(t)`} constitute a shadow manifold ${tex`\mathcal{M}_X`}, which is a one to one mapping to the original manifold ${tex`\mathcal{M}`} (the collection of all states ${tex`\mathbf{s}(t)`} of the dynamical system). ${tex.block`{\mathcal{M}_X = [\mathbf{x}_1(t), \mathbf{x}_2(t),...,\mathbf{x}_{N-(E-1)}(t)]^T.}`} ### Finding Embedding Parameters The exercise of finding appropriate embedding parameters is a evolving field. The most commonly applied methods to find the embedding delay ${tex`\tau`} is the auto mutual information (see notebook: [AMI function](https://observablehq.com/d/6b6c7e64607f7ab1)). The embedding dimension ${tex`E`} can be obtained via the False Nearest Neighbors (FNN) Algorithm (see notebook: [FNN](https://observablehq.com/d/6b6c7e64607f7ab1)). After these embedding parameters are obtained, the respective time series ${tex`x(t)`} can be embedded to obtain the shadow manifold ${tex`\mathcal{M}_X`}, and thus the reconstructed state space that captures the dynamics of the dynamical system with only one time series. ## k Nearest Neigbhors in shadow manifolds ## The example The Lorenz Attractor comprises the following differential equations: ${tex.block`{\displaystyle {\begin{aligned}{\frac {\mathrm {d} x}{\mathrm {d} t}}&=\sigma (y-x),\\[6pt]{\frac {\mathrm {d} y}{\mathrm {d} t}}&=x(\rho -z)-y,\\[6pt]{\frac {\mathrm {d} z}{\mathrm {d} t}}&=xy-\beta z.\end{aligned}}}`} ` 33:T1491,fullscreen2 = htl.html``; 34:T5da,viewof controls = multiplexInputs( { sigma: Inputs.range([9, 11], {value:10, label: "σ", step: 0.1}), beta : Inputs.range([2, 4], {value:8/3, label: "β", step: 0.1}), rho : Inputs.range([20, 30], {value:28, label: "ρ", step: 0.1}), dimensionSelector : select({ title: "Coordinate", options: [ { label: "X", value: 0 }, { label: "Y", value: 1 }, { label: "Z", value: 2 } ], value: 0 // Default to X dimension }), kNN : Inputs.range([0, 100], {value:10, label: "kNN", step: 1}), tau : Inputs.range([0, 100], {value:10, label: "τ", step: 1}), x0 : Inputs.range([-5, 5], {value:1, label: "x0", step: 0.1}), y0 : Inputs.range([-5, 5], {value:1, label: "y0", step: 0.1}), z0 : Inputs.range([-5, 5], {value:0, label: "z0", step: 0.1}), dt : Inputs.range([0.001, 0.01], {value: 0.01, label:"dt", step:0.0001}), t : Inputs.range([100, 50000], {value: 5000, label:"time", step:1}), scatterSize : Inputs.range([0.01,10], {value:.8, label:'Scatter Size', step:0.01}), lineWidth : Inputs.range([0.01,10], {value:3., label:'Line Width', step:0.01}), scatterColor : Inputs.color({value:'#f8fadb',label:'Scatter Color'}), lineColor : Inputs.color({value:'#f8fadb',label:'Line Color'}), backgroundColor : Inputs.color({value:'#171717',label:'Background Color'}), fullScreenBackgroundColor : Inputs.color({value:'#171717',label:'Full Screen Color'}), }, { label: 'Controls',open:false, inline: false } )35:T2590,manifold = { // draw chart const width = viewport.width; const height = viewport.width; const padding = 50; const pointRadius = controls.scatterSize; // Define the radius of the points const onOpacity =1; const outOpacity = 0; // Define the plot area dimensions const plotAreaWidth = width - 2 * padding; const plotAreaHeight = height - 2 * padding; // Define scales for x and y const xScale = d3.scaleLinear() .domain(d3.extent(lorenzCoordinate, d => d[0])) .range([0, plotAreaWidth]); const yScale = d3.scaleLinear() .domain(d3.extent(lorenzCoordinate, d => d[1])) .range([plotAreaHeight, 0]); const svg = d3.select(DOM.svg(width, height)) .style("background",controls.backgroundColor) // Define zoom behavior const zoom = d3.zoom() .scaleExtent([0.5, 10]) // Set the scale extent .on("zoom", zoomed); const g = svg .append("g") .attr("transform", `translate(${padding}, ${padding})`); //.attr("transform", `scale(2)`) //.attr("transform-origin", `center`) // Apply zoom behavior to the SVG svg.call(zoom); // Define the line generator const line = d3.line() .x(d => xScale(d[0])) .y(d => yScale(d[1])); // Draw the line g.append("path") .datum(lorenzCoordinate) .attr("class", "line") .attr("d", line) .style("fill", "none") .style("stroke", controls.lineColor) .style("stroke-width", controls.lineWidth); // VORONOI STUFF const voronoiDiagram = d3 .voronoi() .x(d => xScale(d[0])) .y(d => yScale(d[1])) //.x((d) => d[0]) //.y((d) => d[1]) .extent([[0, 0], [plotAreaWidth, plotAreaHeight]])(lorenzCoordinate); // draw the polygons const voronoiPolygons = g .append("g") .attr("class", "voronoi-polygons") .style("pointer-events", "none") .selectAll("path.polygon") .data(voronoiDiagram.polygons()) .enter() .append("path") .attr("class", "polygon") .style("stroke-width", .2) .style("stroke", "white") .style("background", "black") .style("fill", "white") .style("opacity", onOpacity) .attr("d", (d) => `M${d.join("L")}Z`); console.log(voronoiDiagram.polygons()) // // VORONOI INTERACTIONS // // draw circles const circles = g .append("g") .attr("class", "circles") .selectAll(".data-point") .data(lorenzCoordinate) .enter() .append("circle") .classed("data-point", true) .attr("r", pointRadius) //.attr("cx", (d) => d[0]) //.attr("cy", (d) => d[1]) .attr("cx", d => xScale(d[0])) .attr("cy", d => yScale(d[1])) .attr("fill", controls.scatterColor) .on("mouseover", function(event, d) { const index = lorenzCoordinate.indexOf(d); const prevPoint = lorenzCoordinate[index - 1]; let distance = "N/A"; if (prevPoint) { const dx = d[0] - prevPoint[0]; const dy = d[1] - prevPoint[1]; distance = Math.sqrt(dx * dx + dy * dy).toFixed(2); } tooltip.style("display", "block") .html(`Index: ${index}
Distance: ${distance}`) .style("left", `${event.pageX + 5}px`) .style("top", `${event.pageY + 5}px`); }) .on("mouseout", () => { tooltip.style("display", "none"); }); // add the overlay on top of everything to take the mouse events g.append("rect") .attr("class", "overlay") .attr("width", plotAreaWidth) .attr("height", plotAreaHeight) .style("opacity", 0) .on("mousemove", mouseMoveHandler) .on("mouseleave", () => highlight(null)); // Add a tooltip for showing distance and index const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "rgba(0, 0, 0, 0.7)") .style("color", "white") .style("padding", "5px") .style("border-radius", "3px") .style("display", "none"); // Add the overlay on top of everything to take the mouse events g.append("rect") .attr("class", "overlay") .attr("width", plotAreaWidth) .attr("height", plotAreaHeight) .style("opacity", 0) .on("mousemove", mouseMoveHandler) .on("mouseleave", () => highlight(null)); // add a circle for indicating the highlighted point g.append("circle") .attr("class", "highlight-circle") .attr("r", pointRadius + 0.5) // slightly larger than our points .style("fill", "grey") .style("background",'grey') .style("display", "none") .attr('background','grey'); // Function to calculate the Euclidean distance between two points function euclideanDistance(a, b) { const dx = a[0] - b[0]; const dy = a[1] - b[1]; return Math.sqrt(dx * dx + dy * dy); } // Calculate distances of the nearest neighbors function getNNN(data, point, k) { return data .map((d, i) => ({ index: i, distance: euclideanDistance(d, point) })) .sort((a, b) => a.distance - b.distance) .slice(1, k + 1) // exclude the point itself .map(d => d.index); } // // Draw the histogram of distances // function drawHistogram(distances) { // const histWidth = 400; // const histHeight = 200; // const histPadding = { top: 20, right: 20, bottom: 30, left: 50 }; // // const x = d3.scaleLinear() // .domain([0, d3.max(distances)]).nice() // .range([histPadding.left, histWidth - histPadding.right]); // // const bins = d3.histogram() // .domain(x.domain()) // .thresholds(x.ticks(20))(distances); // // const y = d3.scaleLinear() // .domain([0, d3.max(bins, d => d.length)]).nice() // .range([histHeight - histPadding.bottom, histPadding.top]); // // d3.select("#histogram").remove(); // Remove previous histogram // // const svgHist = d3.select(svg.node().parentNode).append("svg") // .attr("id", "histogram") // .attr("width", histWidth) // .attr("height", histHeight) // .style("position", "absolute") // .style("top", "20px") // .style("left", "20px") // .style("background", 'none') // .style("padding", "5px") // .style("border-radius", "3px") // .style("color", "white") // .attr("fill", "none") // .attr("stroke", "white"); // // // // // const gHist = svgHist.append("g") // .attr("transform", `translate(${histPadding.left},0)`); // // gHist.append("g") // .selectAll("rect") // .data(bins) // .enter().append("rect") // .attr("x", d => x(d.x0) + 1) // .attr("y", d => y(d.length)) // .attr("width", d => x(d.x1) - x(d.x0) - 1) // .attr("height", d => y(0) - y(d.length)) // .attr("fill", "none") // .attr("stroke", "white"); // // gHist.append("g") // .attr("transform", `translate(0,${histHeight - histPadding.bottom})`) // .call(d3.axisBottom(x).tickFormat(() => "")); // Remove x-axis tick labels // // // Add x-axis label // svgHist.append("text") // .attr("x", histWidth / 2) // .attr("y", histHeight - 10) // .style("text-anchor", "middle") // .style("fill", "white") // .text("d"); // // gHist.append("g") // .attr("transform", `translate(${histPadding.left - histPadding.left},0)`) // .call(d3.axisLeft(y)); // // // Add y-axis label // svgHist.append("text") // .attr("transform", "rotate(-90)") // .attr("y", histPadding.left / 2 - 30) // Adjusted to prevent overlap //.attr("y", histPadding.left / 2 - 5) // .attr("x", -histHeight / 2) // .attr("dy", "1em") // .style("text-anchor", "middle") // .style("fill", "white") // .text("p(d)"); // } // callback to highlight a point function highlight(d) { if (!d) { d3.select(".highlight-circle").style("display", "none"); } else { d3.selectAll(".neighbor-line").remove(); d3.select(".highlight-circle") .style("display", "") //.attr("cx", d[0]) //.attr("cy", d[1]) .attr("cx", xScale(d[0])) .attr("cy", yScale(d[1])) .attr("stroke", "black") .style("fill", "black"); // get location of currently select circle let loc = d.slice(0, 2); // get n-nearest neighbors to circle let nn = getNNN(lorenzCoordinate, loc, controls.kNN); // edit opacity for polygons g.selectAll(".polygon").style("opacity", (d, i) => nn.indexOf(i) > -1 ? onOpacity : outOpacity ).style("fill", (d, i) => nn.indexOf(i) > -1 ? "hsl("+ i*0.9 * 360 + ",50%,50%)" : 'white' ); // draw lines between points const points = lorenzCoordinate.filter((d, i) => nn.indexOf(i) > -1); g.selectAll(".line") .data(points) .enter() .append("line") .attr("class", "neighbor-line") .attr("x1", xScale(loc[0])) .attr("y1", yScale(loc[1])) .attr("x2", d => xScale(d[0])) .attr("y2", d => yScale(d[1])) //.attr("x1", (d) => loc[0]) //.attr("y1", (d) => loc[1]) //.attr("x2", (d) => d[0]) //.attr("y2", (d) => d[1]) .attr("stroke", "white") .style("stroke-width", .2) .style("pointer-events", "none") .style("opacity", 1); // Calculate and draw the histogram of distances const distances = points.map(p => euclideanDistance(p, loc)); //drawHistogram(distances); // track last hovered element in global scope dataScope.lastDataHovered = d; } } // callback for when the mouse moves across the overlay function mouseMoveHandler() { // get the current mouse position const [mx, my] = d3.mouse(this); // use the new diagram.find() function to find the Voronoi mouse position const closestPoint = voronoiDiagram.find(mx, my, plotAreaWidth); // highlight the point if we found one highlight(closestPoint && closestPoint.data); } // Zoomed function to handle zoom events function zoomed() { g.attr("transform", d3.event.transform); } highlight(dataScope.lastDataHovered) yield svg.node() } 36:T1449,// old full screen //fullscreen = htl.html``; 37:Td60,function enableFullscreen({ startNextCell = 0, noOfCells = 3 } = {}) { const currentCell = document.querySelector(".observablehq"); if (!currentCell) { console.error("ObservableHQ cell not found."); return; } // Find the target cells let nextCell = currentCell; for (let i = 0; i < startNextCell; i++) { nextCell = nextCell.nextElementSibling; } let cells = []; let originalHeights = []; let originalStyles = new Map(); let totalOriginalHeight = 0; for (let i = 0; i < noOfCells && nextCell; i++) { let rect = nextCell.getBoundingClientRect(); originalHeights.push(rect.height); totalOriginalHeight += rect.height; originalStyles.set(nextCell, { ...nextCell.style }); cells.push(nextCell); nextCell = nextCell.nextElementSibling; } if (cells.length === 0) { alert("No valid cells found!"); return; } // Hide all other cells except the selected ones document.querySelectorAll(".observablehq").forEach(cell => { if (!cells.includes(cell) && cell !== currentCell) { cell.style.visibility = "hidden"; } }); // Create fullscreen wrapper const fullScreenWrapper = document.createElement("div"); cells.forEach(cell => fullScreenWrapper.appendChild(cell)); document.body.appendChild(fullScreenWrapper); // Get computed background color let bgColor = window.getComputedStyle(fullScreenWrapper).backgroundColor; // Function to determine if color is dark function isDark(color) { let rgb = color.match(/\d+/g); if (!rgb) return false; let [r, g, b] = rgb.map(Number); let brightness = (r * 299 + g * 587 + b * 114) / 1000; // Luminance formula return brightness < 128; } // Determine text color based on background let textColor = isDark(bgColor) ? "white" : "black"; // Apply fullscreen wrapper styles Object.assign(fullScreenWrapper.style, { position: "fixed", top: "0", left: "0", width: "100vw", height: "100vh", background: bgColor, color: textColor, // Adjusted text color overflow: "hidden", padding: "20px", zIndex: "9999", }); // Adjust cell styles dynamically function adjustCellHeights() { let availableHeight = window.innerHeight; cells.forEach((cell, index) => { let heightRatio = originalHeights[index] / totalOriginalHeight; Object.assign(cell.style, { position: "relative", width: "100%", height: `${availableHeight * heightRatio}px`, background: "transparent", color: textColor, // Apply text color to cells overflow: "auto", padding: "10px", borderBottom: "2px solid " + (isDark(bgColor) ? "white" : "black"), }); }); } adjustCellHeights(); window.addEventListener("resize", adjustCellHeights); // Enter fullscreen fullScreenWrapper.requestFullscreen?.() || fullScreenWrapper.webkitRequestFullscreen?.() || console.error("Fullscreen API not supported"); // Restore on exit document.addEventListener("fullscreenchange", () => { if (!document.fullscreenElement) { document.querySelectorAll(".observablehq").forEach(cell => { cell.style.visibility = ""; }); cells.forEach(cell => { Object.assign(cell.style, originalStyles.get(cell) || {}); }); fullScreenWrapper.remove(); window.removeEventListener("resize", adjustCellHeights); } }); } 38:[] 30:{"id":"0c4bef6e3eb2aebe","slug":null,"title":"kNN in Strange Attractors","thumbnail":"6a2e536da1aef4199e803ab98d97559bf7c3710edc8747a5b0a79a24442375db","access_level":"public","create_time":"$D2025-08-08T10:55:25.398Z","update_time":"$D2025-09-27T18:27:27.403Z","view_time":null,"first_public_time":"$D2025-08-08T10:55:25.398Z","has_unpublished_edits":null,"fork":{"id":"f78dc9c3d9c27571","slug":null,"title":"kNN in Strange Attractors","owner":{"id":"4c66c6a854db2a43","login":"adrian7-ws","name":"Adrian's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4c66c6a854db2a43","login":"adrian7-ws","name":"Adrian's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/aa397fb8648715d791246e7fc0033e2269f7b9ed21184cb2505babc79ad99dcd","tier":"starter_2024"},"version":1360,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39835b898099e8aa","login":"adrianp","name":"Adrian Pelcaru","avatar_url":"https://avatars-next.observableusercontent.com/d39dfcd622b59da8f369378f3d1ca34e415aa3214d6603e139ed5ad071142b4c","tier":null}],"members":[{"type":"individual","id":"39835b898099e8aa","login":"adrianp","name":"Adrian Pelcaru","avatar_url":"https://avatars-next.observableusercontent.com/d39dfcd622b59da8f369378f3d1ca34e415aa3214d6603e139ed5ad071142b4c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"kNN in Strange Attractors","cells":[{"id":0,"value":"# kNN in Strange Attractors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1269,"value":"viewof fullScreenControls = multiplexInputs(\n {\n startNextCell: Inputs.range([1, 2], {value:0, label: \"Start of Next Cell\", step: 1}),\n noOfCells: Inputs.range([1, 3], {value:2, label: \"No of Subsequent Cells\", step: 1}),\n },\n { label: 'Full Screen Cell Controls',open:true, inline: true }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"fullScreenControls","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1317,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"mutable kNNdistances = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1092,"value":"viewof viewportSizing = Inputs.radio(['Display', 'Export'], {\n value: 'Display',\n label: 'Size viewport for:'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"viewport = ({\n width: viewportSizing === 'Export' ? 640 : width,\n height: viewportSizing === 'Export' ? 480 : Math.max(400, width * 0.7),\n pixelRatio: viewportSizing === 'Export' ? 1 : devicePixelRatio\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"lorenz = (t, a) => {\n const [x, y, z] = a\n return [\n controls.sigma*(y-x),\n x*(controls.rho-z)-y,\n x*y-controls.beta*z\n ]}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"dataScope = ({lastDataHovered: lorenzCoordinate[100]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"makeData = (n) => {\n return d3.range(n).map(() => {\n let x = Math.random()* (plotAreaWidth - padding) + padding / 2;\n let y = Math.random() * (plotAreaHeight - padding) + padding / 2;\n return [x, y, Math.round(Math.random())];\n });\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"padding = 1;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"plotAreaHeight = viewport.height - padding - padding;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"plotAreaWidth = width - padding - padding;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"pointRadius = 1;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"outOpacity = 0.;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"onOpacity = 1.0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"// Step 1: Generate Lorenz attractor data\nfunction lorenzAttractor() {\n let x = controls.x0, y = controls.y0, z = controls.z0; // Initial conditions\n const data = [];\n for (let i = 0; i < controls.t; i++) {\n const dx = controls.sigma * (y - x);\n const dy = x * (controls.rho - z) - y;\n const dz = x * y - controls.beta * z;\n\n x += dx * controls.dt;\n y += dy * controls.dt;\n z += dz * controls.dt;\n data.push([x, y, z]);\n }\n return data;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"// Step 2: Implement Takens embedding function\nfunction takensEmbedding(data, tau, dimension = 3) {\n const embedded = [];\n for (let i = 0; i < data.length - (dimension - 1) * tau; i++) {\n const point = [];\n for (let j = 0; j < dimension; j++) {\n point.push(data[i + j * tau]);\n }\n embedded.push(point);\n }\n return embedded;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"\n// Step 5: Apply the Takens embedding to the selected dimension of the Lorenz attractor data with the selected τ\nfunction performTakensEmbedding() {\n const lorenzData = lorenzAttractor();\n const tau = controls.tau;\n const dimension = controls.dimensionSelector;\n const selectedData = lorenzData.map(d => d[dimension]); // Select the specified dimension\n const embeddedData = takensEmbedding(selectedData, tau, 3); // 3D embedding\n // Ensure the embedded data is a 2D array of shape (Time, dimension)\n return embeddedData.map(d => d.flat());\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"lorenzAttractor().map(d => d[controls.dimensionSelector])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"// Display the embedded data as a 3D array\nlorenzCoordinate = performTakensEmbedding();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1157,"value":"//fullscreen = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"dist2 = (x, y) => (x[0] - y[0]) ** 2 + (x[1] - y[1]) ** 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"dist = (x, y) => x.reduce((sum, xi, i) => sum + (xi - y[i]) ** 2, 0);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function getNNN2(data, loc, k) {\n // 1. get the distances between the data (train_data)\n // and the current point (loc).\n let dists = [];\n for (let i = 0; i < data.length; i++) {\n dists.push([i, dist(data[i], loc)]);\n }\n // 2. sort those points to the test data in ascending order\n dists.sort(function (a, b) {\n return a[1] - b[1];\n });\n // 3. Keep the indices of the top k train_data points\n let res = [];\n for (let i = 0; i < k; i++) {\n res.push(dists[i][0]);\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"getNNN = (data, loc, k) => {\n return data\n .map((point, index) => [index, dist(point, loc)]) // Compute distances\n .sort((a, b) => a[1] - b[1] || a[0] - b[0]) // Sort by distance, break ties using index\n .slice(0, k) // Take the top k elements\n .map(([index]) => index); // Extract indices\n};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"odex = import(\"https://cdn.skypack.dev/odex\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"math = import(\"https://cdn.skypack.dev/mathjs@12.4.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"import { inputsGroup } from '@bumbeishvili/input-groups'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"import {ternarySlider} from \"@yurivish/ternary-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"import {slider, checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"import {chart} from \"@d3/contours\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"MathJax = require(\"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js\").catch(\n () => window[\"MathJax\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"import { multiplexInputs } from '@rreusser/multiplex-inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 31:"$30:body"