2b:null 2c:["$","title",null,{"children":"Nonparametric Regression | Martin C. Arnold | Observable"}] 31:T1b20,theplot = { const svg = d3.select(DOM.svg(innerWidth + margin.left + margin.right, innerHeight + margin.top + margin.bottom)) const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // Setup clipping path const clipID = "plot-area-clip"; svg.append("defs") .append("clipPath") .attr("id", clipID) .append("rect") // Shape of the clipping path, .attr("width", innerWidth) // The width of the clipping area .attr("height", innerHeight) // The height of the clipping area .attr("x", 0) // The x position of the clipping rectangle .attr("y", 0); // The y position of the clipping rectangle const plotAreaGroup = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) .attr("clip-path", `url(#${clipID})`); // Axes g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + innerHeight + ")") .call(d3.axisBottom(xScale)); g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(yScale)); // Line generator for the nonparametric estimate let lineGenerator = d3.line() .x(d => xScale(d[0])) .y(d => yScale(d[1])); // Line generator for the kernel function let kernelLine = d3.line() .x(d => xScale(d.x)) .y(d => yScale(d.y)) .curve(d3.curveBasis); // Data g.selectAll("circle") .data(data) .enter().append("circle") .attr("r", 2.5) .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .style("fill", "black") .style("fill-opacity", ".25"); // Ground truth const targetXs = d3.range(0, 4.05, 0.005); let truth = targetXs.map(d => [d, 1 + Math.sin(2 * d)]); g.append("path") .datum(truth) .attr("d", lineGenerator) .attr("stroke", "black") .attr("stroke-opacity", .5) .attr("fill", "none") .attr("stroke-width", 2.5); if(bw_type) { // Convert bandwidth to number of nearest neighbors used in the local regression estimates let k = ~~(bandwidth * data.length); // Highlight k-nearest neighbours g.selectAll("circle") .each(function(d) { d.distance = Math.abs(d.x - thevalue); }) .sort((a, b) => d3.ascending(a.distance, b.distance)) // sort circles distance .filter((d, i) => i < k) // Select the k nearest neighbours .style("fill", "darkorange") .style("fill-opacity", "1"); } else { g.selectAll("circle") .filter(d => Math.abs(d.x - thevalue) < bandwidth ) .style("fill", "darkorange") .style("fill-opacity", "1"); } let est, bw_plot; if(estimator === "Nadaraya-Watson") { var kr = kernelRegression() .kernel(thekernel) .nn(bw_type) .bandwidth(bandwidth); // points for the kernel regression line var regressionData = kr.estimate(data, targetXs); // Plot kernel regression estimate var rdfiltered = regressionData.filter(d => d[0] <= thevalue); est = rdfiltered[rdfiltered.length - 1][1]; bw_plot = rdfiltered[rdfiltered.length - 1][2]; g.append("path") .datum(rdfiltered) .attr("d", lineGenerator) .attr("stroke", "red") .attr("fill", "none") .attr("stroke-width", 2.5); // Plot the current estimate g.selectAll(".nwest") .data([rdfiltered[rdfiltered.length - 1]]) .enter().append("circle") .attr("r", 4) .attr("cx", d => xScale(d[0])) .attr("cy", d => yScale(d[1])) .attr("fill", "red") .attr("class", "nwest"); // Compute kernel used at the _current_ predictor value const rangeWidth = 2 * 1/bw_plot, numPoints = 400, dx = rangeWidth / numPoints; let kernelData = []; kernelData.push({x: thevalue - rangeWidth / 2, y: est}); // Generate main kernel data points for (let i = 0; i <= numPoints; i++) { let x = ((i * dx) - (rangeWidth / 2)) + thevalue; let y = kernel(Math.abs(x - thevalue) / (rangeWidth / 2), thekernel); kernelData.push({x: x, y: y + est}); } kernelData.push({x: thevalue + rangeWidth / 2, y: est}); // Plot the kernel plotAreaGroup.selectAll(".thepath") .data([kernelData]) .join( enter => enter.append("path").attr("d", kernelLine), update => update.attr("d", kernelLine), exit => exit.remove() ) .attr('class', 'thepath') .attr('fill', 'orange') .attr('fill-opacity', .25) .attr('stroke', 'orange') .attr('stroke-width', 1.5); } else { // LOESS generator function let thegen = mloess() .x(d => d.x) .y(d => d.y) .nn(bw_type) .bandwidth(bandwidth); // Get the _current_ estimate let yloesshat = thegen(data).filter(d => d[0] <= thevalue); yloesshat = yloesshat[yloesshat.length - 1]; // Plot the estimate g.selectAll(".loessest") .data([yloesshat]) .enter().append("circle") .attr("r", 4) .attr("cx", d => xScale(d[0])) .attr("cy", d => yScale(d[1])) .attr("fill", "#39ff14") .attr("class", "loessest"); // Plot LOESS line g.append("path") .datum(thegen(data).filter(d => d[0] <= thevalue)) .attr("d", lineGenerator) .attr("stroke", "red") .attr("fill", "none") .attr("stroke-width", 2.5); // Local linear regression line at the _current_ predictor value let cc = thegen.lfitparam().filter(entry => entry.dx + entry.ux < thevalue), lastReg = cc[cc.length - 1]; // Add regression line plotAreaGroup.append("line") .attr("x1", xScale(lastReg.dx + lastReg.ux - .5 )) .attr("x2", xScale(lastReg.dx + lastReg.ux + .5)) .attr("y1", yScale(lastReg.a + lastReg.b * (lastReg.dx - .5 ) + lastReg.uy)) .attr("y2", yScale(lastReg.a + lastReg.b * (lastReg.dx + .5 ) + lastReg.uy)) .attr("stroke", "#39ff14") .attr("stroke-width", 2.5); // show kernel used at the _current_ predictor value const rangeWidth = 2 * 1/lastReg.denom, numPoints = 400, dx = rangeWidth / numPoints; let kernelData = []; kernelData.push({x: thevalue - rangeWidth / 2, y: yloesshat[1]}); for (let i = 0; i <= numPoints; i++) { let x = ((i * dx) - (rangeWidth / 2)) + thevalue; let y = kernel(Math.abs(x - thevalue) / (rangeWidth / 2), thekernel); kernelData.push({x: x, y: y + yloesshat[1]}); } kernelData.push({x: thevalue + rangeWidth / 2, y: yloesshat[1]}); // Plot the kernel plotAreaGroup.selectAll(".thepath") .data([kernelData]) .join( enter => enter.append("path").attr("d", kernelLine), update => update.attr("d", kernelLine), exit => exit.remove() ) .attr('class', 'thepath') .attr('fill', 'orange') .attr('fill-opacity', .25) .attr('stroke', 'orange') .attr('stroke-width', 1.5); } return svg.node(); }32:T1244,function mloess () { var x = function x(d) { return d[0]; }, y = function y(d) { return d[1]; }, bandwidth = .3, maxiters = 2, nn = true, epsilon = 1e-12; var lfitparam = []; function findIndex(xv, value, lessThan = true) { // Find index for interval-based approach if (lessThan) { for (var i = 0; i < xv.length; i++) if (xv[i] >= value) return Math.max(0, i - 1); } else { for (var i = xv.length - 1; i >= 0; i--) if (xv[i] <= value) return Math.min(xv.length - 1, i + 1); } return lessThan ? 0 : xv.length - 1; } function loess(data) { var _points = points(data, x, y, true), _points2 = _slicedToArray(_points, 4), xv = _points2[0], yv = _points2[1], ux = _points2[2], uy = _points2[3], n = xv.length, bw = Math.max(2, ~~(bandwidth * n)), yhat = new Float64Array(n), residuals = new Float64Array(n), robustWeights = new Float64Array(n).fill(1); for (var iter = -1; ++iter <= maxiters;) { if(nn) { var interval = [0, bw - 1]; for (var i = 0; i < n; ++i) { var dx = xv[i], i0 = interval[0], i1 = interval[1], edge = dx - xv[i0] > xv[i1] - dx ? i0 : i1; var W = 0, X = 0, Y = 0, XY = 0, X2 = 0, denom = 1 / Math.abs(xv[edge] - dx || 1); // Avoid singularity for (var k = i0; k <= i1; ++k) { var xk = xv[k], yk = yv[k], w = kernel(Math.abs(dx - xk) * denom, thekernel) * robustWeights[k], xkw = xk * w; W += w; X += xkw; Y += yk * w; XY += yk * xkw; X2 += xk * xkw; } // Linear regression fit var _ols = ols(X / W, Y / W, XY / W, X2 / W), _ols2 = _slicedToArray(_ols, 2), a = _ols2[0], b = _ols2[1]; yhat[i] = a + b * dx; residuals[i] = Math.abs(yv[i] - yhat[i]); lfitparam[i] = {a: a, b: b, dx: dx, ux: ux, xv: xv, uy: uy, yv: yv, yhat: yhat[i], denom: denom}; updateInterval(xv, i + 1, interval); } } else { for (var i = 0; i < n; ++i) { var dx = xv[i], i0 = findIndex(xv, dx - bandwidth); i1 = findIndex(xv, dx + bandwidth, false); edge = dx - xv[i0] > xv[i1] - dx ? i0 : i1; var W = 0, X = 0, Y = 0, XY = 0, X2 = 0, denom = 1 / Math.abs(xv[edge] - dx || 1); // Avoid singularity for (var k = i0; k <= i1; ++k) { var xk = xv[k], yk = yv[k], w = kernel(Math.abs(dx - xk) * denom, thekernel) * robustWeights[k], xkw = xk * w; W += w; X += xkw; Y += yk * w; XY += yk * xkw; X2 += xk * xkw; } // Linear regression fit var _ols = ols(X / W, Y / W, XY / W, X2 / W), _ols2 = _slicedToArray(_ols, 2), a = _ols2[0], b = _ols2[1]; yhat[i] = a + b * dx; residuals[i] = Math.abs(yv[i] - yhat[i]); lfitparam[i] = {a: a, b: b, dx: dx, ux: ux, xv: xv, uy: uy, yv: yv, yhat: yhat[i], denom: 1/bandwidth}; } } if (iter === maxiters) { break; } var medianResidual = median(residuals); if (Math.abs(medianResidual) < epsilon) break; for (var _i = 0, arg, _w; _i < n; ++_i) { arg = residuals[_i] / (6 * medianResidual); // Default to epsilon (rather than zero) for large deviations // Keeping weights tiny but non-zero prevents singularites robustWeights[_i] = arg >= 1 ? epsilon : (_w = 1 - arg * arg) * _w; } } return output(xv, yhat, ux, uy); } loess.lfitparam = function() { return lfitparam; }; loess.nn = function (NN_bw) { return arguments.length ? (nn = NN_bw, loess) : nn; }; loess.bandwidth = function (bw) { return arguments.length ? (bandwidth = bw, loess) : bandwidth; }; loess.x = function (fn) { return arguments.length ? (x = fn, loess) : x; }; loess.y = function (fn) { return arguments.length ? (y = fn, loess) : y; }; return loess; }33:T7aa,function kernelRegression() { var x = function (d) { return d.x; }, y = function (d) { return d.y; }, bandwidth = .3, nn = false, ktype = "epanechnikov"; function estimate(data, targetXs) { const n = data.length; return targetXs.map(targetX => { let neighbors = data; if (nn) { const k = Math.max(2, ~~(bandwidth * n)); // at least 2 neighbors neighbors = data .map(d => ({point: d, dist: Math.abs(x(d) - targetX)})) .sort((a, b) => a.dist - b.dist) .slice(0, k) .map(d => d.point); } let yhat = 0, totalWeight = 0, denom = nn ? 1 / Math.abs(x(neighbors[neighbors.length - 1]) - targetX) : 1 / bandwidth; neighbors.forEach((point, i) => { let dx = x(point), dy = y(point), u = (dx - targetX) * denom, weight = kernel(u, ktype); yhat += weight * dy; totalWeight += weight; }); return [targetX, totalWeight > 0 ? yhat / totalWeight : null, denom]; }); } return { estimate, bandwidth: function (bw) { if (!arguments.length) return bandwidth; bandwidth = bw; return this; }, kernel: function (k) { if (!arguments.length) return ktype; ktype = k; return this; }, nn: function (flag) { if (!arguments.length) return nn; nn = flag; return this; }, x: function (fn) { if (!arguments.length) return x; x = fn; return this; }, y: function (fn) { if (!arguments.length) return y; y = fn; return this; } }; }34:[{"id":"96bbf33ecff37ad241fcfa9545d650adb44d74eca9a6ca1d409c58556dfb5828536cb7507ca3b5a4da99a99ed0e7dae9d4c68580a6c3a117bec83060cd6c363b","href":"https://static.observableusercontent.com/files/96bbf33ecff37ad241fcfa9545d650adb44d74eca9a6ca1d409c58556dfb5828536cb7507ca3b5a4da99a99ed0e7dae9d4c68580a6c3a117bec83060cd6c363b","name":"nonlinear_data@1.csv","type":"text/csv","lastModified":1713103677022.013,"size":16130}] 2f:{"id":"6ad2c88d5f52fa8d","slug":null,"title":"Nonparametric Regression","thumbnail":"46ad10a8ce88add5650f4d7ac73741735dbad97c6abf8f03d867ce61149b5002","access_level":"public","create_time":"$D2024-04-14T14:07:57.022Z","update_time":"$D2024-09-22T13:47:37.421Z","view_time":null,"first_public_time":"$D2024-04-14T14:07:57.022Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a15f09cdacc76604","login":"mca91","name":"Martin C. Arnold","avatar_url":"https://avatars-next.observableusercontent.com/32a29503786d2aa1a44c308c128c4358cc9b14b88b44d07021d13aec19546bd4","tier":"starter_2024"},"version":1363,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"904bd4d0c1146834","login":"mca91","name":"Martin C. Arnold","avatar_url":"https://avatars-next.observableusercontent.com/32a29503786d2aa1a44c308c128c4358cc9b14b88b44d07021d13aec19546bd4","tier":null}],"members":[{"type":"individual","id":"904bd4d0c1146834","login":"mca91","name":"Martin C. Arnold","avatar_url":"https://avatars-next.observableusercontent.com/32a29503786d2aa1a44c308c128c4358cc9b14b88b44d07021d13aec19546bd4","tier":null,"role":"editor"},{"type":"team","id":"a15f09cdacc76604","login":"mca91","name":"Martin C. Arnold","avatar_url":"https://avatars-next.observableusercontent.com/32a29503786d2aa1a44c308c128c4358cc9b14b88b44d07021d13aec19546bd4","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Nonparametric Regression","cells":[{"id":0,"value":"md`# Nonparametric Regression\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"viewof startAnimation = Inputs.button(\"Stop/Restart animation\", {reduce: () => true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"viewof estimatorLabels = Inputs.radio([\"Nadaraya-Watson Kernel Regression\", \"LOESS\"], \n {label: \"Estimator\", value: \"Nadaraya-Watson Kernel Regression\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"viewof thekernel = Inputs.select(\n [ \n \"cosine\",\n \"epanechnikov\",\n \"quartic\",\n \"triangular\",\n \"tricube\",\n \"uniform\"\n ], \n {label: \"Kernel\", value: \"epanechnikov\"}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"viewof bw_type = Inputs.radio([true, false], {label: \"NN Bandwidth?\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"viewof bandwidth = Inputs.range([.03, .3], {label: \"Bandwidth\",\n step: .001,\n value: .15\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"viewof thevalue = Inputs.range([0.02, 4], {label: \"Predictor value\", step: .005, value: currentValue})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":958,"value":"md`### Functions\nThe below functions are from the [d3-regression](https://github.com/HarryStevens/d3-regression) package by Harry Stevens. loess is adapted to my needs.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"function median(arr){\n arr.sort((a, b) => a - b);\n var i = arr.length / 2;\n return i % 1 === 0 ? (arr[i - 1] + arr[i]) / 2 : arr[Math.floor(i)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"function updateInterval(xv, i, interval) {\n let val = xv[i],\n left = interval[0],\n right = interval[1] + 1;\n\n if (right >= xv.length) return;\n\n // Step right if distance to new right edge is <= distance to old left edge\n // Step when distance is equal to ensure movement over duplicate x values\n while (i > left && (xv[right] - val) <= (val - xv[left])) {\n interval[0] = ++left;\n interval[1] = right;\n ++right;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"function ols(uX, uY, uXY, uX2) {\n const delta = uX2 - uX * uX,\n slope = Math.abs(delta) < 1e-24 ? 0 : (uXY - uX * uY) / delta,\n intercept = uY - slope * uX;\n\n return [intercept, slope];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"function kernel(x, kernelType) {\n // domain check\n if (Math.abs(x) > 1.0) return 0;\n\n switch (kernelType) {\n case 'uniform':\n return 0.5;\n case 'triangular':\n return 1 - Math.abs(x);\n case 'epanechnikov':\n return (1 - x * x) * 0.75;\n case 'quartic':\n return (1 - x * x) * (1 - x * x) * 0.9375;\n case 'triweight':\n return (1 - x * x) * (1 - x * x) * (1 - x * x) * 1.09375;\n case 'tricube':\n return (1 - Math.abs(Math.pow(x, 3))) * (1 - Math.abs(Math.pow(x, 3))) * (1 - Math.abs(Math.pow(x, 3))) * 0.8642;\n case 'cosine':\n return Math.PI / 4 * Math.cos(Math.PI / 2 * x);\n default:\n throw new Error('Unknown kernel');\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"function output(xv, yhat, ux, uy) {\n const n = xv.length, out = [];\n let i = 0, cnt = 0, prev = [], v;\n\n for (; i {\n let u = x(d, i), v = y(d, i);\n return u != null && isFinite(u) && v != null && isFinite(v);\n });\n\n if (sort) {\n data.sort((a, b) => x(a) - x(b));\n }\n\n const n = data.length,\n X = new Float64Array(n),\n Y = new Float64Array(n);\n\n // extract values, calculate means\n let ux = 0, uy = 0, xv, yv, d;\n for (let i = 0; i < n; ) {\n d = data[i];\n X[i] = xv = +x(d, i, data);\n Y[i] = yv = +y(d, i, data);\n ++i;\n ux += (xv - ux) / i;\n uy += (yv - uy) / i;\n }\n\n // mean center the data\n for (let i = 0; i < n; ++i) {\n X[i] -= ux;\n Y[i] -= uy;\n }\n\n return [X, Y, ux, uy];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":" function _arrayWithHoles(arr) {\n if (Array.isArray(arr)) return arr;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":" function _iterableToArrayLimit(arr, i) {\n var _arr = [];\n var _n = true;\n var _d = false;\n var _e = undefined;\n\n try {\n for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {\n _arr.push(_s.value);\n\n if (i && _arr.length === i) break;\n }\n } catch (err) {\n _d = true;\n _e = err;\n } finally {\n try {\n if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n } finally {\n if (_d) throw _e;\n }\n }\n\n return _arr;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":" function _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance\");\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"function _slicedToArray(arr, i) {\n return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"function replaceNaNs(data) {\n // Map through the array with access to index and array itself\n return data.map((current, index, arr) => {\n if (!isNaN(current[1])) {\n // If current y is not NaN, return it as is\n return current;\n }\n\n // Handling for NaN values\n const prev = arr[index - 1];\n const next = arr[index + 1];\n\n // Check if previous and next exist and are numbers\n if (prev && !isNaN(prev[1]) && next && !isNaN(next[1])) {\n // Average of previous and next y values\n const average = (prev[1] + next[1]) / 2;\n return [current[0], average];\n }\n\n // Return the current pair as is if no valid neighbors\n return current;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"data = await FileAttachment(\"nonlinear_data@1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data","database":"$undefined"},{"id":150,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"margin = ({left: 25, right: 5, top: 15, bottom: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"innerWidth = 600 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"innerHeight = 450 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"xScale = d3.scaleLinear()\n .domain([0, 4.25])\n .rangeRound([0, innerWidth - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"yScale = d3.scaleLinear()\n .domain([-.25, 3])\n .rangeRound([innerHeight, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":949,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"import {d3} from \"https://d3js.org/d3.v6.min.js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"### Things to handle the animation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1203,"value":"estimator = {\n switch(estimatorLabels) {\n case \"Nadaraya-Watson Kernel Regression\": return \"Nadaraya-Watson\";\n case \"LOESS\": return \"LOESS\";\n default: return \"Nadaraya-Watson\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1011,"value":"mutable currentValue = 2; // current val for the slider as mutuable state","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"mutable animationRunning = false; //animation currently running?","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"{\n mutable animationRunning = !mutable animationRunning; // Toggle running state on button click\n \n if (startAnimation) {\n let start = 0.02;\n let end = 4.0;\n let step = 0.005;\n let delay = 1; // milliseconds\n\n for (let value = start; value <= end; value += step) {\n if (!mutable animationRunning) break; // Check if animation should stop\n yield Promises.tick(delay);\n mutable currentValue = value; \n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"