31:[] 2f:{"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"},{"id":67,"value":"viewof circles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"button = {\n var btn = html``;\n btn.onclick = e => transition();\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"html`\n\t\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":32,"value":"//path = svg.select(\"path#wiggle\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"svg = d3.select(\"svg g\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":91,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}