2b:null 2c:["$","title",null,{"children":"Directional Arrows For SVG Paths | Alok Pepakayala | Observable"}] 31:T587,html` `32:[] 2f:{"id":"ff18e4e8249ac478","slug":"directional-arrows-for-svg-paths","title":"Directional Arrows For SVG Paths","thumbnail":"d78a652e2838b696199c46e5877d4b7f3d98c6452a883124e5fc0efaf68d086a","access_level":"public","create_time":"$D2020-01-17T05:55:01.210Z","update_time":"$D2020-01-17T09:02:33.409Z","view_time":null,"first_public_time":"$D2020-01-17T07:06:51.385Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9","tier":"starter_2024"},"version":124,"publish_version":124,"role":null,"authored":false,"authors":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null}],"members":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"88efef5ebfba789f","slug":"toolbox","title":"Toolbox","owner":{"id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala"}},"type":"notebook","body":{"title":"Directional Arrows For SVG Paths","cells":[{"id":0,"value":"md`# Directional Arrows For SVG Paths`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"viewof arrowCount = slider({\n title: \"Arrow Count\",\n min: 1,\n max: 40,\n step: 1,\n value: 25\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"updateSvg(arrowCount)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"function updateSvg(ac) {\n var data = d3.range(ac);\n var arrows = d3\n .select(\"svg\")\n .selectAll(\"use\")\n .data(data);\n arrows\n .enter()\n .append(\"use\")\n .attr(\"xlink:href\", \"#arrow\")\n .each(draw);\n arrows.each(draw);\n arrows.exit().remove();\n return data + \" -> arrows drawn!\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"function draw(d, i) {\n var path = document.getElementById(\"loop\");\n var length = path.getTotalLength();\n var l = (length * i) / arrowCount,\n angle = angleAtLength(l, path),\n point = pointAtLength(l, path);\n\n point[0] = point[0] + 6 * Math.cos(angle - Math.PI / 2);\n point[1] = point[1] + 6 * Math.sin(angle - Math.PI / 2);\n d3.select(this).attr(\n \"transform\",\n \"translate(\" + point + \") rotate(\" + (angle * 180) / Math.PI + \")\"\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"function pointAtLength(l, path) {\n var xy = path.getPointAtLength(l, path);\n return [xy.x, xy.y];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"function angleAtLength(l, path) {\n var a = pointAtLength(Math.max(l - 0.01, 0), path), // this could be slightly negative\n b = pointAtLength(l + 0.01, path); // browsers cap at total length\n\n return Math.atan2(b[1] - a[1], b[0] - a[0]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"import { slider, color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"md`### References\nhttp://bl.ocks.org/veltman/7664840c2908478123304ba6281a5364`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"