29:null 2a:["$","title",null,{"children":"Interactive SVG manipulation from a file created with Adobe Illustrator | Christophe Yamahata | Observable"}] 2f:T1228,// This SVG file was created with Adobe Illustrator diagram = { const sketch = await svg_text; const document = (new DOMParser).parseFromString(sketch, "image/svg+xml"); const svg = d3.select(document.documentElement).remove(); // Apply a translation transformation to offset the SVG to the right const offsetX = 50; svg.attr("transform", `translate(${offsetX}, 0)`); // Create a container for the SVG and add a border const container = d3.create("div") .style("border", "2px solid black") .style("display", "inline-block") .style("padding", "10px"); container.node().appendChild(svg.node()); // Append SVG to the container // Hide part of the text if (Math.abs(theta_1-theta_1_0-1) > 2 || Math.abs(theta_2-theta_2_0-2) > 6) { svg.select("#angles").style("display", "none"); hide_angles.value = true; } else { hide_angles.value = false; } // Rotate bar linkage L1 var L1 = svg.select("#Bar_x5F_L1_2_"); var x1_L1 = parseFloat(L1.attr("x1")); var y1_L1 = parseFloat(L1.attr("y1")); var x2_L1 = parseFloat(L1.attr("x2")); var y2_L1 = parseFloat(L1.attr("y2")); // Apply the rotation to L1 L1.attr("transform", `rotate(${-(theta_1-theta_1_0)},${x1_L1},${y1_L1})`); // Calculate the new coordinates of x2, y2 after rotation for L1 var angle1 = -(theta_1-theta_1_0) * Math.PI / 180; // Convert to radians var newX2_L1 = x1_L1 + (x2_L1 - x1_L1) * Math.cos(angle1) - (y2_L1 - y1_L1) * Math.sin(angle1); var newY2_L1 = y1_L1 + (x2_L1 - x1_L1) * Math.sin(angle1) + (y2_L1 - y1_L1) * Math.cos(angle1); // Move point B to the new position var B = svg.select("#Circle_x5F_B_1_"); B.attr("cx", newX2_L1).attr("cy", newY2_L1); // Select the text element "B" and apply the rotation transformation var B = svg.select("#B_x5F_"); const dx_B = -8; const dy_B = -20; B.attr("transform", `translate(${newX2_L1 +dx_B},${newY2_L1 + dy_B}) rotate(0)`); // Select the text element "L1" and apply the rotation transformation var L1_text = svg.select("#L1_x5F_"); const dx_L1 = -25; const dy_L1 = -10; L1_text.attr("transform", `translate(${(x1_L1+newX2_L1)/2 +dx_L1},${(y1_L1 + newY2_L1)/2 + dy_L1}) rotate(0)`); // Rotate bar linkage L2 var L2 = svg.select("#Bar_x5F_L2_2_"); var x1_L2 = parseFloat(L2.attr("x1")); var y1_L2 = parseFloat(L2.attr("y1")); var x2_L2 = parseFloat(L2.attr("x2")); var y2_L2 = parseFloat(L2.attr("y2")); // Apply the rotation to L2 based on the rotation of L1 var newX1_L2 = x1_L1 + (x1_L2 - x1_L1) * Math.cos(angle1) - (y1_L2 - y1_L1) * Math.sin(angle1); var newY1_L2 = y1_L1 + (x1_L2 - x1_L1) * Math.sin(angle1) + (y1_L2 - y1_L1) * Math.cos(angle1); var newX2_L2 = x1_L1 + (x2_L2 - x1_L1) * Math.cos(angle1) - (y2_L2 - y1_L1) * Math.sin(angle1); var newY2_L2 = y1_L1 + (x2_L2 - x1_L1) * Math.sin(angle1) + (y2_L2 - y1_L1) * Math.cos(angle1); // Update L2 with the new coordinates L2.attr("x1", newX1_L2).attr("y1", newY1_L2) .attr("x2", newX2_L2).attr("y2", newY2_L2); // Calculate the new coordinates of x2, y2 after rotation theta_2 var angle2 = -(theta_2-theta_2_0) * Math.PI / 180; // Convert to radians var finalX1_L2 = newX2_L1 + (newX1_L2 - newX2_L1) * Math.cos(angle2) - (newY1_L2 - newY2_L1) * Math.sin(angle2); var finalY1_L2 = newY2_L1 + (newX1_L2 - newX2_L1) * Math.sin(angle2) + (newY1_L2 - newY2_L1) * Math.cos(angle2); var finalX2_L2 = newX2_L1 + (newX2_L2 - newX2_L1) * Math.cos(angle2) - (newY2_L2 - newY2_L1) * Math.sin(angle2); var finalY2_L2 = newY2_L1 + (newX2_L2 - newX2_L1) * Math.sin(angle2) + (newY2_L2 - newY2_L1) * Math.cos(angle2); // Update L2 with the final coordinates L2.attr("x1", finalX1_L2).attr("y1", finalY1_L2) .attr("x2", finalX2_L2).attr("y2", finalY2_L2); // Select the text element "L2" and apply the rotation transformation var L2_text = svg.select("#L2_x5F_"); const dx_L2 = 15; const dy_L2 = -20; L2_text.attr("transform", `translate(${(newX2_L1+finalX2_L2)/2 +dx_L2},${(newY2_L1 + finalY2_L2)/2 + dy_L2}) rotate(0)`); // Move point C to the new position var C = svg.select("#Circle_x5F_C_2_"); C.attr("cx", finalX2_L2).attr("cy", finalY2_L2); // Move cross_C var cross_C = svg.select("#Cross_x5F_C_2_"); cross_C.attr("transform", `translate(${finalX2_L2-x2_L2},${finalY2_L2-y2_L2})`); // Select the text element "C" and apply the rotation transformation var C = svg.select("#C_x5F_"); const dx_C = 25; const dy_C = 8; C.attr("transform", `translate(${finalX2_L2 +dx_C},${finalY2_L2 + dy_C}) rotate(0)`); return container.node(); // Return the container node } 30:Tfd6,// This SVG file was created with Adobe Illustrator lamp = { const lamp = await FileAttachment("lamp_sketch@15.svg").text(); const document = (new DOMParser).parseFromString(lamp, "image/svg+xml"); const svg = d3.select(document.documentElement).remove(); // Hide part of the text if ( (theta_1_lamp!=theta_1_0_lamp) || (theta_2_lamp!=theta_2_0_lamp)) { svg.select("#Text__x2B__symbols").style("display", "none"); } if(hide_drawing) { svg.select("#Drawing").style("display", "none"); svg.select("#Text__x2B__symbols").style("display", "none"); } // Create a container for the SVG and add a border const container = d3.create("div") .style("border", "2px solid black") .style("display", "inline-block") .style("padding", "10px"); container.node().appendChild(svg.node()); // Append SVG to the container // Rotate bar linkage L1 var L1 = svg.select("#Bar_x5F_L1_2_"); var x1_L1 = parseFloat(L1.attr("x1")); var y1_L1 = parseFloat(L1.attr("y1")); var x2_L1 = parseFloat(L1.attr("x2")); var y2_L1 = parseFloat(L1.attr("y2")); // Apply the rotation to L1 L1.attr("transform", `rotate(${-(theta_1_lamp-theta_1_0_lamp)},${x1_L1},${y1_L1})`); // Rotate lamp, part "B" var B_lamp = svg.select("#B_x5F_lamp_1_"); B_lamp.attr("transform", `rotate(${-(theta_1_lamp-theta_1_0_lamp)},${x1_L1},${y1_L1})`); // Calculate the new coordinates of x2, y2 after rotation for L1 var angle1 = -(theta_1_lamp-theta_1_0_lamp) * Math.PI / 180; // Convert to radians var newX2_L1 = x1_L1 + (x2_L1 - x1_L1) * Math.cos(angle1) - (y2_L1 - y1_L1) * Math.sin(angle1); var newY2_L1 = y1_L1 + (x2_L1 - x1_L1) * Math.sin(angle1) + (y2_L1 - y1_L1) * Math.cos(angle1); // Move point B to the new position var B = svg.select("#Circle_x5F_B_1_"); B.attr("cx", newX2_L1).attr("cy", newY2_L1); // Rotate bar linkage L2 var L2 = svg.select("#Bar_x5F_L2_2_"); var x1_L2 = parseFloat(L2.attr("x1")); var y1_L2 = parseFloat(L2.attr("y1")); var x2_L2 = parseFloat(L2.attr("x2")); var y2_L2 = parseFloat(L2.attr("y2")); // Apply the rotation to L2 based on the rotation of L1 var newX1_L2 = x1_L1 + (x1_L2 - x1_L1) * Math.cos(angle1) - (y1_L2 - y1_L1) * Math.sin(angle1); var newY1_L2 = y1_L1 + (x1_L2 - x1_L1) * Math.sin(angle1) + (y1_L2 - y1_L1) * Math.cos(angle1); var newX2_L2 = x1_L1 + (x2_L2 - x1_L1) * Math.cos(angle1) - (y2_L2 - y1_L1) * Math.sin(angle1); var newY2_L2 = y1_L1 + (x2_L2 - x1_L1) * Math.sin(angle1) + (y2_L2 - y1_L1) * Math.cos(angle1); // Update L2 with the new coordinates L2.attr("x1", newX1_L2).attr("y1", newY1_L2) .attr("x2", newX2_L2).attr("y2", newY2_L2); // Calculate the new coordinates of x2, y2 after rotation theta_2 var angle2 = -(theta_2_lamp-theta_2_0_lamp) * Math.PI / 180; // Convert to radians var finalX1_L2 = newX2_L1 + (newX1_L2 - newX2_L1) * Math.cos(angle2) - (newY1_L2 - newY2_L1) * Math.sin(angle2); var finalY1_L2 = newY2_L1 + (newX1_L2 - newX2_L1) * Math.sin(angle2) + (newY1_L2 - newY2_L1) * Math.cos(angle2); var finalX2_L2 = newX2_L1 + (newX2_L2 - newX2_L1) * Math.cos(angle2) - (newY2_L2 - newY2_L1) * Math.sin(angle2); var finalY2_L2 = newY2_L1 + (newX2_L2 - newX2_L1) * Math.sin(angle2) + (newY2_L2 - newY2_L1) * Math.cos(angle2); // Update L2 with the final coordinates L2.attr("x1", finalX1_L2).attr("y1", finalY1_L2) .attr("x2", finalX2_L2).attr("y2", finalY2_L2); // Rotate lamp, part "C" var C_lamp = svg.select("#C_x5F_lamp_1_"); C_lamp.attr("transform", ` rotate(${-(theta_2_lamp - theta_2_0_lamp)}, ${newX2_L1}, ${newY2_L1}) rotate(${-(theta_1_lamp - theta_1_0_lamp)}, ${x1_L1}, ${y1_L1}) `); // Move point C to the new position var C = svg.select("#Circle_x5F_C_2_"); C.attr("cx", finalX2_L2).attr("cy", finalY2_L2); // Move cross_C var cross_C = svg.select("#Cross_x5F_C_2_"); cross_C.attr("transform", `translate(${finalX2_L2-x2_L2},${finalY2_L2-y2_L2})`); return container.node(); // Return the container node }31:[{"id":"50d9b10a6fb7410faff6d7d209578a0a01fec86f45151a26cbe42a0b6a8eb564e04d2d42079288c075f5516d75d5f4eb69dec03dc3f439715a8847ee5a3319b9","href":"https://static.observableusercontent.com/files/50d9b10a6fb7410faff6d7d209578a0a01fec86f45151a26cbe42a0b6a8eb564e04d2d42079288c075f5516d75d5f4eb69dec03dc3f439715a8847ee5a3319b9","name":"screen_capture_simple_sketch_Illustrator_layers.PNG","type":"image/png","lastModified":1724677212324.179,"size":59839},{"id":"094d81f65ecf52b606047052bc4c73305400e45946c17d72c254720cda4580caa6e03ff4c4cd7f1b4d09745e68ad48bc89d35bff882c2221e74b71f045141656","href":"https://static.observableusercontent.com/files/094d81f65ecf52b606047052bc4c73305400e45946c17d72c254720cda4580caa6e03ff4c4cd7f1b4d09745e68ad48bc89d35bff882c2221e74b71f045141656","name":"simple_sketch@7.svg","type":"image/svg+xml","lastModified":1724678121633.27,"size":3975},{"id":"645833bc9dd3ac5939b9afb11bcedc8eab36a90d99a0ce875fe941ffdec4108b534eb30c06d7f5f593a0c97455f38a52d3ca5f4cd4d8059e9b963b29ba8d6278","href":"https://static.observableusercontent.com/files/645833bc9dd3ac5939b9afb11bcedc8eab36a90d99a0ce875fe941ffdec4108b534eb30c06d7f5f593a0c97455f38a52d3ca5f4cd4d8059e9b963b29ba8d6278","name":"lamp_sketch@15.svg","type":"image/svg+xml","lastModified":1724695115212.845,"size":200403}] 2d:{"id":"e0ff3306709c2afc","slug":"interactive-svg-manipulation","title":"Interactive SVG manipulation from a file created with Adobe Illustrator","thumbnail":"467bd7ba7791f947c7f0e5495665bf053901a0c7366b32f1819cb4ea791fa1e4","access_level":"public","create_time":"$D2024-08-26T08:51:25.291Z","update_time":"$D2024-08-26T19:01:46.123Z","view_time":null,"first_public_time":"$D2024-08-26T13:35:00.240Z","has_unpublished_edits":null,"fork":false,"stars":0,"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":537,"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"},{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"a4317cf9df48c2f1","slug":"sandbox","title":"Sandbox","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"Interactive SVG manipulation from a file created with Adobe Illustrator","cells":[{"id":0,"value":"# Interactive SVG manipulation from a file created with Adobe Illustrator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"Creating and animating SVGs directly with code can be quite cumbersome. A more efficient approach is to design the SVG in dedicated software first and then enhance it with interactivity using JavaScript.\n\nIn this notebook, we demonstrate how to interactively manipulate an SVG diagram prepared in Adobe Illustrator CS6. We import the SVG file into the notebook and show how to dynamically update and modify the diagram using sliders.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":511,"value":"---\n### Basic example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"viewof theta_1 = Inputs.range([-90, 90], {value: theta_1_value, step: 0.1, label: html`Angle θ₁`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof theta_2 = Inputs.range([0, 270], {value: theta_2_value, step: 0.1, label: html`Angle θ₂`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"viewof reset = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"---\n\n### Example with a wall lamp\nIn the following example, the SVG was enhanced by incorporating a 2D drawing of a wall lamp into the existing file. \nTo enable interactive manipulation of the lamp, the vector drawing of the lamp was divided into three separate parts. \nThe script was then slightly modified to allow the lamp to follow the transformations of the bar linkages L1 and L2.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":483,"value":"viewof hide_drawing = Inputs.toggle({label: \"Hide sketch\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"viewof theta_1_lamp = Inputs.range([10, 90], {value: theta_1_lamp_value, step: 0.1, label: html`Angle θ₁`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"viewof theta_2_lamp = Inputs.range([100, 160], {value: theta_2_lamp_value, step: 0.1, label: html`Angle θ₂`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"viewof reset_lamp = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"---\n### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"hide_angles = Inputs.toggle({label: \"Hide angles\", value: false, disabled: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"reset_graph = {\n reset;\n mutable theta_1_value = theta_1_0;\n mutable theta_2_value = theta_2_0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"reset_lamp_illustration = {\n reset_lamp;\n mutable theta_1_lamp_value = theta_1_0_lamp;\n mutable theta_2_lamp_value = theta_2_0_lamp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"theta_1_0 = 42.3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"theta_1_0_lamp = 56.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"mutable theta_1_value = theta_1_0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"mutable theta_1_lamp_value = theta_1_0_lamp;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"theta_2_0 = -0.4+90\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"theta_2_0_lamp = 54.5+90\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"mutable theta_2_value = theta_2_0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"mutable theta_2_lamp_value = theta_2_0_lamp;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"drawing = htl.html`\n

**Diagram created in Adobe Illustrator CS6**. This screen capture highlights the structured layers of the illustration designed in Adobe Illustrator CS6. The unique IDs assigned through grouping and renaming elements significantly simplify the manipulation of the SVG file.\n

\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"// SVG file exported from Adobe Illustrator CS6\nsvg_text = FileAttachment(\"simple_sketch@7.svg\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"