29:null 2a:["$","title",null,{"children":"Marker animation along SVG element | Alessio Cimarelli | Observable"}] 2f:[] 2d:{"id":"91117a7b2ae3f9e7","slug":"marker-animation-along-svg-path-element","title":"Marker animation along SVG element","thumbnail":"b71eecb5c6dea0406ee4e7cf831b6fb802eef8125d2e36feeddee2c1564bd73b","access_level":"public","create_time":"$D2018-02-09T16:49:08.317Z","update_time":"$D2018-02-10T11:34:41.489Z","view_time":null,"first_public_time":"$D2018-02-09T17:55:55.763Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"042a6cbfbb60a618","login":"jenkin","name":"Alessio Cimarelli","avatar_url":"https://avatars-next.observableusercontent.com/b69deb946932caada5e33a77ce30430e2702ab7d1ff23f8f78baf85f4a2c5bfb","tier":"starter_2024"},"version":92,"publish_version":92,"role":null,"authored":false,"authors":[{"type":"individual","id":"0fab5eaf95389e65","login":"jenkin","name":"Alessio Cimarelli","avatar_url":"https://avatars-next.observableusercontent.com/b69deb946932caada5e33a77ce30430e2702ab7d1ff23f8f78baf85f4a2c5bfb","tier":null}],"members":[{"type":"individual","id":"0fab5eaf95389e65","login":"jenkin","name":"Alessio Cimarelli","avatar_url":"https://avatars-next.observableusercontent.com/b69deb946932caada5e33a77ce30430e2702ab7d1ff23f8f78baf85f4a2c5bfb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Marker animation along SVG element","cells":[{"id":0,"value":"md`\n# Marker animation along SVG element\n\nOriginal source: http://bl.ocks.org/KoGor/8162640.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"viewof circles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"button = {\n var btn = html``;\n btn.onclick = e => transition();\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html`\n\t\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"startPoint = {\n var startPoint = pathStartPoint(path);\n markers.attr(\"r\", 7).attr(\"transform\", \"translate(\" + startPoint + \")\");\n return startPoint;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"markers = {\n let c = svg.selectAll(\"circle\").data(d3.range(circles));\n c.enter().append(\"circle\");\n c.exit().remove();\n return svg.selectAll(\"circle\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"//path = svg.select(\"path#wiggle\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"svg = d3.select(\"svg g\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function transition() {\n markers.transition()\n .duration(7500)\n \t\t.delay((d,i) => i*100)\n .attrTween(\"transform\", translateAlong(path.node()));\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function translateAlong(path) {\n var l = path.getTotalLength();\n return function(i) {\n return function(t) {\n var p = path.getPointAtLength(t * l);\n return \"translate(\" + p.x + \",\" + p.y + \")\";//Move marker\n }\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function pathStartPoint(path) {\n var d = path.attr(\"d\"),\n dsplitted = d.split(\"C\");\n return dsplitted[0].slice(1).split(\",\");\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"path = {\n var data = d3.range(Math.max(circles,10));\n\n var angle = d3.scaleLinear()\n \t.domain([0, d3.max(data)])\n .range([0, 2 * Math.PI]);\n\n var radius = d3.scaleLinear()\n .domain([0, d3.max(data)])\n .range([100, 400]);\n\n var radialLine = d3.radialLine()\n .angle(function(d) { return angle(d)})\n .radius(function(d) { return radius(10 * Math.random())})\n .curve(d3.curveBasisClosed);\n\n\n var path = svg.select(\"path\")\n .attr(\"d\", radialLine(data))\n .attr(\"fill\", \"none\")\n// .attr(\"transform\", \"scale(0.2)\")\n \t.attr(\"stroke-width\", 4);\n return path\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"