2e:null 2f:["$","title",null,{"children":"D3 Force Along a Path | Fabian Iwand | Observable"}] 34:T4b6,// Source: https://observablehq.com/@mootari/d3-path-force function pathForce(path, nodes, { strength = .1, offset = (n, i, nodes) => i / nodes.length, initialize = true, clamp = Infinity } = {}) { const getStrength = callable(strength), getClamp = callable(clamp), getScale = max => !isFinite(max) ? () => 1 : (dx, dy) => { const d = Math.hypot(dx, dy); return d ? Math.min(max, d) / d : 0; }, getPoint = (i, l) => path.getPointAtLength(offset(nodes[i], i, nodes) * l), getLength = () => path.getTotalLength(); // Initialize node positions along the path. if(initialize) { const l = getLength(); for(let i = 0, p; i < nodes.length; i++) { p = getPoint(i, l); nodes[i].x = p.x; nodes[i].y = p.y; } } // The simulation step callback. return () => { const l = getLength(), s = getStrength(), clamp = getScale(getClamp()); for(let i = 0, p, n, dx, dy, c; i < nodes.length; i++) { p = getPoint(i, l); n = nodes[i]; dx = s * (p.x - n.x); dy = s * (p.y - n.y); c = clamp(dx, dy); n.vx += c * dx; n.vy += c * dy; } }; }; 35:Tae6,function createAnimation(invalidate, options) { const { width: w = 600, height: h = 400, pad = 70, count = 100, nodePad = 1, nodeRadius = 5, duration = 20000, backgroundColor = '#fff', trackColor = 'hsla(190,100%,50%,.8)', colors = ['#000', '#666', '#aaa'], path = svg``, strength, collideIterations = 1, drawTrack = callable(false), offsetCallback = tick => (n, i, arr) => i/arr.length, clamp = Infinity, coloring = callable('mix'), } = options; // Crutch to allow caching of per-tick calculations. let tick = 0, offset = offsetCallback(tick); const nodes = Array.from({length: count}, () => ({x: 0, y: 0})); const force = pathForce(path, nodes, { strength, clamp, offset: (n, i, arr) => offset(n, i, arr), }); const ctx = DOM.context2d(w, h); ctx.canvas.style.maxWidth = '100%'; const drawNode = n => { ctx.moveTo(n.x + nodeRadius, n.y); ctx.arc(n.x, n.y, nodeRadius, 0, Math.PI * 2); }; const drawModes = { 'mixed': () => { for(let i = 0; i < colors.length; i++) { ctx.beginPath(); for(let j = i; j < nodes.length; j += colors.length) drawNode(nodes[j]); ctx.fillStyle = colors[i], ctx.fill(); } }, 'grouped': () => { for(let i = 0; i < colors.length; i++) { const s = nodes.length / colors.length, a = s * i | 0, b = s * (i+1) | 0; ctx.beginPath(); for(let j = a; j < b; j++) drawNode(nodes[j]); ctx.fillStyle = colors[i], ctx.fill(); } }, 'speed': () => { const l = 5, groups = Array.from({length: l}, () => []), c = callable(clamp)(), cf = l / (isFinite(c) ? c : Math.min(w, h)); for(const n of nodes) { const i = Math.min(l-1, Math.floor(cf * Math.hypot(n.vx, n.vy))); groups[i].push(n); } for(const [i, group] of groups.entries()) { ctx.beginPath(); for(const n of group) drawNode(n); ctx.fillStyle = `hsl(0,0%,${mix(80, 0, i/(l-1))}%)`, ctx.fill(); } }, }; const draw = () => { ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, w, h); drawModes[coloring()](); if(drawTrack()) { ctx.beginPath(); ctx.strokeStyle = trackColor; ctx.lineWidth = 10; ctx.stroke(new Path2D(path.getAttribute('d'))); } }; const sim = d3.forceSimulation(nodes) .alphaDecay(0) .force('track', force) .force('collide', d3.forceCollide(nodeRadius + nodePad).iterations(collideIterations)) .on('tick', () => { offset = offsetCallback(tick++); draw(); }); Promise.race([invalidation, invalidate]).then(() => sim.stop()); return ctx.canvas; }36:[] 32:{"id":"21515a04dba719df","slug":"d3-path-force","title":"D3 Force Along a Path","thumbnail":"e98143070073f2faab03bc3e68f1298b77b9e469c002c4ee23024b20c605d15a","access_level":"public","create_time":"$D2021-05-01T16:01:20.850Z","update_time":"$D2024-01-07T17:35:25.660Z","view_time":null,"first_public_time":"$D2021-05-01T19:16:52.356Z","has_unpublished_edits":null,"fork":false,"stars":129,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":797,"publish_version":797,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":26,"collection":{"id":"e3842c7642c32750","slug":"tools","title":"Tools & Techniques","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"D3 Force Along a Path","cells":[{"id":0,"value":"# D3 Force Along a Path\n\nImplements a custom force for [d3-force](https://github.com/d3/d3-force) which moves nodes along an [SVG path](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement).\n\nSee [→ Example](https://observablehq.com/@mootari/d3-path-force#example) for parameters and details. Import with:\n~~~js\nimport {pathForce} from \"@mootari/d3-path-force\"\n~~~\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"animation = createAnimation(invalidation, {\n count: v_count,\n nodeRadius: v_radius,\n collideIterations: v_collide,\n strength: () => viewof v_strength.value,\n clamp: () => viewof v_clamp.value,\n drawTrack: () => viewof v_track.value,\n coloring: () => viewof v_coloring.value,\n offsetCallback: tick => {\n const t = Date.now() / (v_duration * 1000) % 1,\n tNode = (i, arr) => i / arr.length,\n ease = t => .5 + .5 * Math.cos(t * Math.PI * 2);\n \n return {\n 'single': (n, i, arr) => t,\n 'pair': (n, i, arr) => (t + (tNode(i, arr) < .5 ? 0 : .5)) % 1,\n 'equal': (n, i, arr) => (t + tNode(i, arr)) % 1,\n 'two_lane': (n, i, arr) => (tNode(i, arr) + 1 + (i % 2 ? t : -t)) % 1,\n 'crowded': (n, i, arr) => (tNode(i, arr) + 1 + [0, t, -t][i % 3]) % 1,\n 'pushy': (n, i, arr) => {\n const ti = tNode(i, arr);\n return (ti + t + .1 * ease(ti * 3 - t * 3)) % 1;\n },\n }[viewof v_easing.value];\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof v_radius = Inputs.range([3, 20], {\n value: preset('v_radius', 8),\n step: 1,\n label: html`Node radius
in px`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof v_count = Inputs.range([10, 500], {\n step: 10,\n value: preset('v_count', 200),\n label: 'Number of nodes'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"viewof v_strength = Inputs.range([0, .5], {\n value: preset('v_strength', .05),\n step: .01,\n label: html`Track strength
movement ratio`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"viewof v_clamp = Inputs.range([0, 10], {\n value: preset('v_clamp', 10),\n step: .1,\n label: html`Max step size
in px per sim tick`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof v_collide = Inputs.range([0, 4], {\n value: preset('v_collide', 3),\n step:1,\n label: html`Collision iterations
higher is more rigid`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"viewof v_duration = Inputs.range([5, 100], {\n value: preset('v_duration', 20),\n step:1,\n label: html`Loop duration
in seconds`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"viewof v_easing = (opts => Inputs.select(opts.keys(), {\n value: preset('v_easing', 'equal'),\n label: html`Easing
node offsets on path`,\n format: d => opts.get(d),\n}))(new Map([\n ['single', 'single blob'],\n ['pair', 'two blobs'],\n ['equal', 'equally distributed'],\n ['two_lane', 'opposite directions'],\n ['crowded', 'opposite directions with obstacles'],\n ['pushy', 'moving waves'],\n]\n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"viewof v_coloring = (opts => Inputs.select(opts.keys(), {\n // Legacy support for v_mix option.\n value: preset('v_coloring', preset('v_mix', true) ? 'mixed' : 'grouped'),\n label: 'Coloring',\n format: d => opts.get(d),\n}))(new Map([\n ['mixed', 'by index (mixed)'],\n ['grouped', 'by index (grouped)'],\n ['speed', 'applied force'],\n]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"viewof v_track = Inputs.toggle({\n value: preset('v_track', false),\n label: 'Draw track'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"html`Share this configuration, or revert to defaults.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"### \"Track strength\" vs \"Max step size\"\n\nAt each simulation step (\"tick\") a node is moved towards its target position on the path. The further a node is from its target, the more distance it will cover during a tick. \nThe \"Track strength\" multiplier (\\`strength\\` option) gets applied to this distance. A value of \\`0.5\\` means that the node will cover half the remaining distance towards its target on each tick.\n\n\"Max step size\" (\\`clamp\\` option) is an additional limit that determines the maximum distance a node can cover at each tick. With a step size of \\`10\\`, a node will be moved at most 10px per iterations step towards its target.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"## Example\n\n~~~js\nconst sim = d3.forceSimulation(nodes)\n // pathForce(path, nodes[, options])\n .force('track', pathForce(svgPathElement, nodes))\n~~~\n\n\n### Parameters\n\n- **`path`:** An SVGGeometryElement (e.g. a `` element). \n *Note: Elements other than `` need to be attached to the DOM.*\n- **`nodes`:** the simulation nodes.\n- **`options`:** An optional object with any of the following properties:\n - **`strength`:** ratio of the distance a node is moved towards its target at each step.\n - **`offset`:** callback that returns a node's relative offset along the path (from 0 to 1).\n - **`clamp`:** max movement distance per iteration step.\n - **`initialize`:** sets each node's position to its target on the path.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"example","database":"$undefined"},{"id":622,"value":"---\n \n## Considerations\n\nThe implementation is limited to the \\`SVGGeometryElement\\` interface. Moving forward, we can divide it into two separate concerns:\n1. **Transitioning a point towards a target.** Depending on our goal we could implement various constraints, e.g.:\n - limiting turning speed\n - limiting movement speed\n - flocking to other points\n2. **Getting a point on a path.** By pulling out this concern into a separate implementation, we could cover various scenarios:\n - getting a fixed point on a path\n - getting the closest point on a path\n - getting the closest point on a hull","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// Draws the force path.\nfunction trackPath(ctx, w, h, pad) {\n const x = t => mix(pad, w-pad, t),\n y = t => mix(pad, h-pad, t);\n \n ctx.moveTo(x(0), y(0));\n ctx.lineTo(x(1), y(1));\n ctx.lineTo(x(1), y(0));\n ctx.lineTo(x(0), y(1));\n ctx.closePath();\n\n return ctx;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"mix = (a, b, t) => a + t * (b - a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"// Wraps values as functions.\ncallable = v => typeof v === 'function' ? v : () => v","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"preset = {\n let values = new Map;\n try {\n values = new Map(Object.entries(\n JSON.parse(atob(\n new URL(document.baseURI).searchParams.get('p')\n ))\n ));\n }\n catch(e) {}\n return (name, defaultValue) => values.has(name) ? values.get(name) : defaultValue;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"presetUrl = {\n const url = new URL(document.baseURI);\n url.searchParams.set('p', btoa(JSON.stringify({\n v_radius, v_count, v_strength, v_clamp, v_collide, v_duration, v_coloring, v_track, v_easing\n })));\n return ''+url;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"resetUrl = {\n const url = new URL(document.baseURI);\n url.searchParams.delete('p');\n return ''+url;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"Inputs = require('@observablehq/inputs@0.8.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"