31:T6f7,chart = { const svg = d3.select(DOM.svg(width, f1.height)); svg.selectAll("g") .data(["background_l", "background_r", "identity", "unwarped", "warping", "series"]).enter() .append("g") .attr("id", (d) => d); svg.select("#background_l") .append("rect") .attrs({ "width": .9 * width / 2, "height": f1.height, "fill": "#F7F7F7" }) .on("mousemove", function() { f1.click_fun(svg, this) }); svg.select("#background_r") .append("rect") .attrs({ "x": 1.1 * width / 2, "width": .9 * width / 2, "height": f1.height, "fill": "#F7F7F7" }) .on("mousemove", function() { f1.click_fun(svg, this) }); var scales = f1.generate_scales(f1.x); svg.select("#unwarped") .selectAll("circle") .data(f1.initialize_x(f1.x.length)).enter() .append("circle") .attrs({ "cx": (d) => 1.1 * width / 2 + scales.t0(d.t0), "cy": (d) => scales.x(d.x), "fill": "#d3d3d3", "r": 3 }) svg.select("#identity") .selectAll("circle") .data(f1.initialize_w(f1.w.length)).enter() .append("circle") .attrs({ "cx": (d) => scales.t0(d.t0), "cy": (d) => scales.t1(d.t1), "fill": "#d3d3d3", "r": 3 }); svg.select("#warping") .selectAll("circle") .data(f1.w).enter() .append("circle") .attrs({ "cx": (d) => scales.t0(d.t0), "cy": (d) => scales.t1(d.t1), "fill": (d) => "#d3d3d3", "r": 3 }); svg.select("#series") .selectAll("circle") .data(f1.x).enter() .append("circle") .attrs({ "cx": (d) => 1.1 * width / 2 + scales.t0(d.t0), "cy": (d) => scales.x(d.x), "fill": "#d3d3d3", "r": 3 }); return svg.node() }32:Td44,f1 = { var height = width / 2, 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) { console.log(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 } }33:[] 2f:{"title":"Time Warping","cells":[{"id":231,"value":"md`# Time Warping`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`Define a monotone time warping function on the left, and see how it distorts the function on the right. Mouseover the right panel to redraw the function-to-be-warped.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3-selection\", \"d3-selection-multi\", \"d3-scale\", \"d3-array\", \"d3-axis\", \"d3-drag\", \"d3-brush\", \"d3-shape\", \"d3-fetch\", \"d3-scale-chromatic\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}