31:[{"id":"9ad03374a287bfb3e526f594fe575858bbd17645ce35592a8ab4b47965da316b5053f15229644d731352655e7d026551f9a58b1ec01bc72c07f23fe93d4c5aec","href":"https://static.observableusercontent.com/files/9ad03374a287bfb3e526f594fe575858bbd17645ce35592a8ab4b47965da316b5053f15229644d731352655e7d026551f9a58b1ec01bc72c07f23fe93d4c5aec","name":"ai export for svg.svg","type":"image/svg+xml","lastModified":1651941014924.901,"size":899}] 2f:{"title":"SVG to Observable D3 movement","cells":[{"id":0,"value":"# SVG to Observable D3 movement","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"Demonstration of bringing in a simple Illustrator file to access as an SVG. Then use D3 to select it's elements and move them.\n\nThe **FileAttachment** below was created in Adobe Illustrator, export to SVG from Illustrator, and then brought in here as a FileAttachment (in the panel on the right). Notice that we're attaching it with type **.text()** rather than .image()","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"The SVG file, imported.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"sampleSVG = FileAttachment(\"ai export for svg.svg\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"import {importSVGnode} from \"@emfielduva/dvlib\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"

\n
\n
\n
\n
\n
\n

\n\n \n

","pinned":true,"hidden":false,"mode":"html"},{"id":279,"value":"svg = vizContainer.appendChild(importSVGnode(sampleSVG))","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"#### ^^ then do the import. \nThis svg import now has fully accessible objects within Observable. You can call them by their ids, or other attributes like class, cx, cy, r, etc.","pinned":false,"hidden":false,"mode":"md"},{"id":255,"value":"Now we can select an object inside of thus by it's ID. \nThere are four objects in this svg: \nid=\"blueDot\" \nid=\"yellowDot\" \nid=\"redDot\" \nand a line id=\"baseline\"","pinned":false,"hidden":false,"mode":"md"},{"id":262,"value":"### D3 can select an object by ID and change it's attributes and styles. \nChange the number at the end of this line (500) to something else and then run to see it move.","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"d3.select(svg).select(\"#redDot\").transition().duration(1000).attr(\"cx\", 500)","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"And we can create some buttons or other elements on the screen to trigger these movements. See the buttons in the divContainer code above. This section binds a click event to each. \nTo do this more easily I'm creating a function called moveToLocation here to help do this multiple times.","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"{\n let controls = d3.select(vizContainer).select(\"#controls\");\n controls.select(\"#moveBlue\").on(\"click\", () => moveToLocation(\"#blueDot\",50,100));\n controls.select(\"#moveYellow\").on(\"click\", () => moveToLocation(\"#yellowDot\",900,200));\n controls.select(\"#moveRed\").on(\"click\", () => moveToLocation(\"#redDot\",800,50));\n\n controls.select(\"#reset\").on(\"click\", () => resetLocations());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"moveToLocation = (id,x,y) => {\n d3.select(svg).select(id).transition().duration(1000).attr(\"cx\",x).attr(\"cy\",y); //for circles\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"resetLocations = () => {\n // back to their original locations, or wherever we specify\n moveToLocation(\"#blueDot\",800,200);\n moveToLocation(\"#yellowDot\",400,600);\n moveToLocation(\"#redDot\",500,800);\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}