f9 = { var height = width / 4, n = 100, w = initialize_w(n), x = initialize_x(n), scales = generate_scales(); function initialize_w(n) { var x = []; for (var i = 1; i < n; i++) { x.push({"t0": i / n, "t1": i / n, "dw": 0}); if (i > 3) { x[i - 1]["dw"] = x[i - 1] - x[i - 4] } } return x; } function initialize_x(n) { var x = []; for (var i = 1; i < n; i++) { x.push({"t0": i / n, "x": Math.sin(2 * Math.PI * i / n), "dw": 0}); } return x; } function generate_scales() { return { "t0": d3.scaleLinear().domain([0, 1]).range([0, .9 * width / 2]), "t1": d3.scaleLinear().domain([0, 1]).range([height, 0]), "x": d3.scaleLinear().domain([-1.2, 1.2]).range([height, 0]), "dw": d3.scaleLinear().domain([0, 3 / n, 5 / n]).range(["#915c83", "#d3d3d3", "#779ecb"]) } } function update_warping(pos) { if (pos[0] < 0 || pos[0] > width / 2 || pos[1] > height || pos[1] < 0) return; var closest_ix = Math.round(scales.t0.invert(pos[0] / 2) * n) / n var min_value = 0; for (var i = 0; i < w.length; i++) { var dist = Math.abs(w[i].t0 / 2 - closest_ix); var b = 1 / (2 * n); if (dist <= b) { w[i].t1 = scales.t1.invert((b - dist) / b * pos[1] + dist / b * scales.t1(w[i].t1)); for (var j = 0; j < w.length; j++) { if (j < i && w[j].t1 > w[i].t1) { w[j].t1 = w[i].t1 } else if (j > i && w[j].t1 < w[i].t1) { w[j].t1 = w[i].t1 } } } if (i > 3) { w[i].dw = (w[i].t1 - w[i - 3].t1) x[i].dw = w[i].dw } } } function update_series(pos) { if (pos[0] <= width / w || pos[0] >= width || pos[1] > height || pos[1] < 0) return; var closest_ix = Math.round(scales.t0.invert(n * (pos[0] - 1.1 * width / 2))) / n for (var i = 0; i < x.length; i++) { var dist = Math.abs(x[i].t0 - closest_ix); if (dist <= 0.05) { x[i].x = scales.x.invert((0.05 - dist) / 0.05 * pos[1] + dist / 0.05 * scales.x(x[i].x)); } } } function redraw_warping(svg, scales, x, w) { svg.select("#warping") .selectAll("circle") .data(w) .attrs({ "cy": (d) => scales.t1(d.t1), "fill": (d) => scales.dw(d.dw), }); for (var i = 0; i < w.length; i++) { x[i].t1 = w[i].t1 } svg.select("#series") .selectAll("circle") .data(x) .attrs({ "cx": (d) => 1.1 * width / 2 + scales.t0(d.t1), "cy": (d) => scales.x(d.x), "fill": (d) => scales.dw(d.dw), }); } function redraw_series(svg, scales, x) { svg.select("#unwarped") .selectAll("circle") .data(x) .attrs({ "cy": (d) => scales.x(d.x), }); } function click_fun(svg, d) { var div = d3.select(d); d3.select(window) .on("mousemove", mousemove); function mousemove() { var pos = d3.mouse(div.node()); update_series(pos); update_warping(pos); redraw_series(svg, scales, x); redraw_warping(svg, scales, x, w); } } return { "initialize_x": initialize_x, "initialize_w": initialize_w, "generate_scales": generate_scales, "w": w, "x": x, "height": height, "click_fun": click_fun } }