f1 = { var height = width / 2, samples = sample_data(key_f(f), N), scales = generate_scales(), fit = knn_fit(samples, f, K), history = [], hist_fun = d3.histogram().value((d) => d).domain(scales.y.domain()).thresholds(scales.y.ticks(50)), histo = hist_fun(history); function generate_scales() { return { "x": d3.scaleLinear().domain([0, 1]).range([0, width]), "y": d3.scaleLinear().domain([-1.2, 1.2]).range([height, 0]), } } function sample_data(f, n) { var samples = []; for (var i = 0; i < n; i++) { var u = Math.round(Math.random() * 100) / 100 var y = f[u] + jstat.normal.sample(0, sigma) samples.push({ "x": u, "y": y }) } return samples } function key_f(f) { var result = {}; for (var i = 0; i < f.length; i++) { result[f[i].x] = f[i].y } return result; } function knn_fit(samples, f, K) { var result = []; for (var i = 0; i < f.length; i++) { var N = neighbors(f[i].x, samples, K) result.push({ "x": f[i].x, "y": d3.mean(N.map((d) => d.y)) }) } return result; } function neighbors(x, samples, K) { var result = []; for (var i = 0; i < samples.length; i++) { var dist = Math.abs(samples[i].x - x); if (result.length < K) { result.push({"x": samples[i].x, "y": samples[i].y, "dist": dist}); } else { var dists = result.map((d) => d.dist); var max_ix = d3.maxIndex(dists); if (dist < dists[max_ix]) { result.splice(max_ix, 1); result.push({"x": samples[i].x, "y": samples[i].y, "dist": dist}); } } } return result } function update_series(pos) { if (pos[0] <= 0 || pos[0] >= width || pos[1] > height || pos[1] < 0) return; console.log(pos) history = []; var closest_ix = Math.round(scales.x.invert(n * (pos[0]))) / n for (var i = 0; i < f.length; i++) { var dist = Math.abs(f[i].x - closest_ix); if (dist <= 0.05) { f[i].y = scales.y.invert((0.05 - dist) / 0.05 * pos[1] + dist / 0.05 * scales.y(f[i].y)); } } } function redraw_series(svg, scales, x) { svg.select("#series") .selectAll("circle") .data(f) .attrs({ "cy": (d) => scales.y(d.y), }); svg.select("#samples") .selectAll("circle") .data(samples) .attrs({ "cx": (d) => scales.x(d.x), "cy": (d) => scales.y(d.y), }); svg.select("#fit") .selectAll("circle") .data(fit) .attrs({ "cx": (d) => scales.x(d.x), "cy": (d) => scales.y(d.y) }) svg.select("#histogram") .selectAll("rect") .data(histo) .attrs({ "x": 0, "width": (d) => history.length == 0? 0 : 200 * d.length / history.length }) svg.select("#fx0").select("rect") .attrs({ "y": scales.y(key_f(f)[x0]) - 5/2, }) } function click_fun(svg) { samples = sample_data(key_f(f), N); fit = knn_fit(samples, f, K); history.push(key_f(fit)[x0]); histo = hist_fun(history) redraw_series(svg, scales, f); } function mouse_fun(svg, d) { var div = d3.select(d); d3.select(window) .on("mousemove", mousemove); function mousemove(event) { var pos = d3.pointer(event); pos[1] = pos[1] - 200 update_series(pos); redraw_series(svg, scales, f); } } return { "initialize_f": initialize_f, "generate_scales": generate_scales, "f": f, "samples": samples, "fit": fit, "height": height, "click_fun": click_fun, "mouse_fun": mouse_fun, "histo": histo, "key_f": key_f } }