29:null 2a:["$","title",null,{"children":"Closest Point on Line: Solution with multiple control points | Christophe Yamahata | Observable"}] 2f:Tac2,{ let x_axis = [mutable x1, mutable x2]; let all_points = x_axis.concat(mutable x); const svg = d3.select(DOM.svg(width, height)); const line = svg.append("line") .attr("stroke", "black"); const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data(all_points) .enter().append("circle") .attr("r", 5) .attr("fill", (d, i) => i == 0 ? "black" : (i == 1 ? "blue" : "red")) .call(d3.drag() .subject(([x,y]) => ({x, y})) .on("drag", dragged)); const projection = svg.selectAll(".projection_points"); const connection = svg.selectAll(".projection_lines"); update(); function dragged(d) { d[0] = Math.max(0, Math.min(width, d3.event.x)); d[1] = Math.max(0, Math.min(height, d3.event.y)); update(); } function update() { const t = (width + height) / distance(mutable x1, mutable x2); const l1 = interpolate(mutable x1, mutable x2, t); const l2 = interpolate(mutable x2, mutable x1, t); for(let i=0; i < mutable x.length;i++) { const p = interpolate(mutable x1, mutable x2, project(mutable x1, mutable x2, mutable x[i])); projection.attr("cx", p[0]).attr("cy", p[1]); line.attr("x1", l1[0]).attr("y1", l1[1]); line.attr("x2", l2[0]).attr("y2", l2[1]); point.attr("cx", d => d[0]).attr("cy", d => d[1]); mutable x_proj[i] = p; } mutable x1 = mutable x1; mutable x2 = mutable x2; mutable x = mutable x; mutable x_proj = mutable x_proj; update_proj(); } function update_proj() { svg.selectAll(".projection_points") .remove(); svg.selectAll(".projection_lines") .remove(); const projection = svg.selectAll(".projection_points") .data(mutable x_proj) .enter() .append("circle") .attr("class", "projection_points") .attr("cx", d=>d[0]) .attr("cy", d=>d[1]) .attr("r", 5) .attr("stroke", "orange") .attr("fill", "white") .attr("fill-opacity", 0.8) for(let i=0; i < mutable x.length ;i++) { const p = interpolate(mutable x1, mutable x2, project(mutable x1, mutable x2, mutable x[i])); const connection = svg.append("line") .attr("class", "projection_lines") .attr("stroke", "orange") .attr("stroke-dasharray", "6 4") .attr("stroke-width", 0.8) .attr("x1", mutable x[i][0]) .attr("y1", mutable x[i][1]) .attr("x2", p[0]) .attr("y2", p[1]) .lower(); // Projection lines placed behind circles } } return svg.node(); }30:[] 2d:{"id":"a4c01dfdb150ea5f","slug":"closest-point-on-line--multiple-control-points","title":"Closest Point on Line: Solution with multiple control points","thumbnail":"a844b05066828140775a74ccf7f9d2d43a9a15ac511918e3b0ccafeee4c70d68","access_level":"public","create_time":"$D2022-09-19T15:37:33.140Z","update_time":"$D2022-09-23T22:10:58.915Z","view_time":null,"first_public_time":"$D2022-09-19T21:41:29.909Z","has_unpublished_edits":null,"fork":{"id":"a1c6b80dd82757f3","slug":"closest-point-on-line","title":"Closest Point on Line","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":3,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":673,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"ddde4e59d0fdf525","slug":"curves","title":"Curves, Graphs and Diagrams","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"Closest Point on Line: Solution with multiple control points","cells":[{"id":0,"value":"md`# Closest Point on Line: Solution with multiple control points\n\nConsider an axis going through two points **X₁** = ⟨*x₁*,*y₁*⟩ and **X₂** = ⟨*x₂*,*y₂*⟩.\nIn this notebook, we will find the coordinates of point **x'** = ⟨*x'*,*y'*⟩ on that axis that is closest to point **x** = ⟨*x*,*y*⟩.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":610,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"mutable x1 = [50, height-50];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"mutable x2 = [width-50, height-100];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"mutable x = [[(1/7)*width, 120], [(2/7)*width, 200],[(3/7)*width, 100],[(4/7)*width, 180], [(5/7)*width, 50], [(6/7)*width, 130]];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"mutable x_proj = [[]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function distance([x1, y1], [x2, y2]) {\n return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function interpolate([x1, y1], [x2, y2], t) {\n return [x1 + (x2 - x1) * t, y1 + (y2 - y1) * t];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"function project([x1, y1], [x2, y2], [x3, y3]) {\n const x21 = x2 - x1, y21 = y2 - y1;\n const x31 = x3 - x1, y31 = y3 - y1;\n return (x31 * x21 + y31 * y21) / (x21 * x21 + y21 * y21);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"