2d:null 2e:["$","title",null,{"children":"Spline Editor (without bug) | Christophe Yamahata | Observable"}] 33:Tf94,chart = { var height = 600; var color_dot_selected = "#C000A0"; var color_dot = "#C0C0C0"; var color_dot_stroke = "#404040" var color_curve = "orange"; var radius = 3; var radius_selected = 5; var radius_new_dot = 7; var dot_stroke = 1.0; var line_stroke = 1.0; var size_selectable_area = 7; var BKG_selectable = "white"; var transition_duration = 400; svg.attr("viewBox", [0, 0, width, height]) .style("border", "2px solid lightblue") .attr("tabindex", 1) .attr("pointer-events", "all") .call(d3.drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged)); svg.append("path") .datum(mutable points) .attr("fill", "none") .attr("stroke", color_curve) .attr("stroke-width", line_stroke) .call(update); d3.select(window) .on("keydown", keydown); function update() { const spline = svg.selectAll(".spline") .data([0]); const splineEnter = spline.enter().append("path").attr("class", "spline"); spline.merge(splineEnter) .attr("fill", "none") .attr("stroke", color_curve) .attr("stroke-width", line_stroke) .attr("d", line(mutable points)) const circle = svg.selectAll("g") .data(mutable points, d => d); circle.enter().append("g") .call(g => g.append("circle") .attr("r", 1.3*size_selectable_area) .attr("stroke", "none") .attr("cursor", "move") .attr("fill", BKG_selectable) .transition() .duration(2*transition_duration) .attr("r", size_selectable_area) ) .call(g => g.append("circle") .attr("r", radius) .attr("stroke", "black") .attr("stroke-width", dot_stroke) .transition() // 1st transition .duration(2*transition_duration) .delay(1.2*transition_duration) .ease(d3.easeElastic) .attr("r", radius_new_dot) .transition() // 2nd transition .duration(3*transition_duration) .delay(2.5*transition_duration) .attr("r", radius) ) .merge(circle) .attr("transform", d => `translate(${d})`) .select("circle:last-child") .attr("fill", d=> { return d===mutable selected ? color_dot_selected : color_dot}) .attr("stroke", d=> { return d===mutable selected ? color_dot_selected : color_dot_stroke}) .attr("r", d=> { return d===mutable selected ? radius_selected: radius}) .attr("cursor", d=> { return d===mutable selected ? "default" : "move"}) spline.exit().remove(); circle.exit().remove(); } function dragsubject(event){ let subject = event.sourceEvent.target.__data__; if(!subject){ mutable points.push(subject = [event.x,event.y]); update() } else{ mutable points = mutable points; update() } return subject } function dragstarted({subject}){ mutable selected = subject; mutable points = mutable points; update(); } function dragged(event) { event.subject[0] = Math.max(0, Math.min(width, event.x)); event.subject[1] = Math.max(0, Math.min(height, event.y)); mutable points = mutable points; update(); } function keydown(event) { if (!mutable selected) return; switch (event.key) { case "Backspace": case "Delete": { event.preventDefault(); const i = mutable points.indexOf(selected); mutable points.splice(i, 1); mutable points = mutable points; mutable selected = mutable points.length ? mutable points[i > 0 ? i - 1 : 0] : null; update(); break; } } } return svg.node(); }34:[{"id":"497734e5b4a2ce570c52a8678089d191d75d3629e1a5bf62ef18fb8acfcfe616bb444ffc6cceb737f4d372bff1fef8f5b896734a573e106418c8ada1d408041d","href":"https://static.observableusercontent.com/files/497734e5b4a2ce570c52a8678089d191d75d3629e1a5bf62ef18fb8acfcfe616bb444ffc6cceb737f4d372bff1fef8f5b896734a573e106418c8ada1d408041d","name":"spline_editor_bug.mp4","type":"video/mp4","lastModified":1663259573137.523,"size":1225647}] 31:{"id":"bdc6b28d7e364a21","slug":"spline-editor-without-bug","title":"Spline Editor (without bug)","thumbnail":"d81690089a9b37de5fc7c1e40a6675a12b4db05cd391fa5ed5ec59313ed2c64b","access_level":"public","create_time":"$D2022-09-15T06:35:05.115Z","update_time":"$D2022-09-18T08:04:29.953Z","view_time":null,"first_public_time":"$D2022-09-15T17:12:49.917Z","has_unpublished_edits":null,"fork":{"id":"b77eb86c799f2bb9","slug":"spline-editor","title":"Spline Editor","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"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":507,"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":"Spline Editor (without bug)","cells":[{"id":0,"value":"# Spline Editor (without bug)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":439,"value":"

This fork is a small rework of the nice \"Spline Editor\" notebook prepared by Mike Bostock some while ago. The primary reason for this fork is that there is a small bug in the original code (see the video embedded below). To solve the issue, I have reused part of a code found in this notebook. \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":435,"value":"
\n

Click below to place a new control point, or to drag an existing one. Hitting Delete will delete the selected control point.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"viewof line = {\n const form = html``;\n form.select.oninput = () => form.value = d3.line().curve(d3[form.select.value]);\n form.select.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"mutable points = [[104,446.90625],[109,165.90625],[435,216.90625],[628,120.90625],[623,262.90625],[787,199.90625],[905,91.90625],[873,236.90625],[877,403.90625],[443,277.90625],[504,90.90625],[279,231.90625],[165,356.90625],[250,335.90625],[366,277.90625],[333,244.90625],[257,382.90625],[355,425.90625],[455,345.90625],[563,265.90625],[491,358.90625],[547,489.90625],[653,363.90625],[758,262.90625],[793,294.90625],[621,323.90625],[415,451.90625]];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"mutable selected = [];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"svg = d3.create(\"svg\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"---\n### Screencapture\n#### *(a video is worth a thousand words)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":459,"value":"video_spline_editor_bug = md `The bug in the original code occurs when we try to add a new point inside an area bounded by the existing points. \nThe issue is shown in the following screen capture. (See what happens to the array points when new data \n[event.x,event.y] are saved.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"