2a:null 2b:["$","title",null,{"children":"Sankey animation — particles generation | Joao Ricardo Mendes | Observable"}] 30:Tcdd,chart = { const svg = d3.select(DOM.svg(width, height)) // Apart from aesthetic function links serve as trajectory for moving particles. // We'll compute particle positions in the next step // const link = svg.append("g").attr('class', 'links') .attr("fill", "none") .attr("stroke-opacity", 0.04) .attr("stroke", "#aaa") .selectAll("path").data(links) .join("path") // use custom sankey function here because we don't care of the node heights and link widths .attr('d', sankeyLinkCustom) .attr("stroke-width", yScale.bandwidth()) // Compute particle positions along the lines. // This technic relies on path.getPointAtLength function that returns coordinates of a point on the path // Another example of this technic: // https://observablehq.com/@oluckyman/point-on-a-path-detection // link.each(function(d) { const path = this const length = path.getTotalLength() const points = d3.range(length).map(l => { const point = path.getPointAtLength(l) return { x: point.x, y: point.y } }) const key = `${d.source}_${d.target}` cache[key] = { points } }) // Instead of just `return svg.node()` we do this trick. // It's needed to expose `update` function outside of this cell. // It's Observable-specific, you can see more animations technics here: // https://observablehq.com/@d3/learn-d3-animation?collection=@d3/learn-d3 // return Object.assign(svg.node(), { // update will be called on each tick, so here we'll perform our animation step update(t) { if (particles.length < totalParticles) { addParticlesMaybe(t) } svg.selectAll('.particle').data(particles.filter(p => p.pos < p.length), d => d.id) .join( enter => enter.append('rect') .attr('class', 'particle') .attr('fill', d => d.color) .attr('width', psize) .attr('height', psize), update => update, exit => exit.remove() ) // At this point we have `cache` with all possible coordinates. // We just need to figure out which exactly coordinates to use at time `t` // .each(function(d) { // every particle appears at its own time, so adjust the global time `t` to local time const localTime = t - d.createdAt d.pos = localTime * d.speed // extract current and next coordinates of the point from precomputed cache const index = Math.floor(d.pos) const coo = cache[d.route].points[index] const nextCoo = cache[d.route].points[index + 1] if (coo && nextCoo) { // `index` is integer, but `pos` is not, so there are ticks when the particle is // between the two precomputed points. We use `delta` to compute position between the current // and the next coordinates to make the animation smoother const delta = d.pos - index // try to set it to 0 to see how jerky the animation is const x = coo.x + (nextCoo.x - coo.x) * delta const y = coo.y + (nextCoo.y - coo.y) * delta d3.select(this) .attr('x', x) .attr('y', y + d.offset) } }) } }) }31:T474,// Randomly add 0 to `density` particles per tick `t` addParticlesMaybe = (t) => { const particlesToAdd = Math.round(Math.random() * density) for (let i = 0; i < particlesToAdd; i++) { const target = routeScale(Math.random()) const route = `${source}_${target}` const length = cache[route].points.length const particle = { // `id` is needed to distinguish the particles when some of them finish and disappear id: `${t}_${i}`, speed: speedScale(Math.random()), // used to position a particle vertically on the band offset: offsetScale(Math.random()), // now is used for aesthetics only, can be used to encode different types (e.g. male vs. female) // color: d3.interpolatePiYG(Math.random() * 0.3), color: colorScale(Math.random()), // current position on the route (will be updated in `chart.update`) pos: 0, // total length of the route, used to determine that the particle has arrived length, // when the particle is appeared createdAt: t, // route assigned to that particle route, } particles.push(particle) } }32:T1082,const menloFlow = (() => { const W = 1120, H = 360, nw = 96, nh = 50, gap = 110; const color = {blue: "#3b82f6", purple: "#8b5cf6", green: "#22c55e", orange: "#f97316", red: "#ef4444", gray: "#9ca3af"}; const nodes = [ {id: "A", col: 0, row: 0, c: "gray", t: ["🌎 Mundo real", "Imóveis • POIs"]}, {id: "B", col: 0, row: 1, c: "gray", t: ["📡 Demand signals", "Trends • GSC • SERP"]}, {id: "C", col: 1, row: 0.5, c: "blue", t: ["🧠 Entities", "Property • City"]}, {id: "D", col: 2, row: 0.5, c: "blue", t: ["🔗 Relationships", "near • serves"]}, {id: "E", col: 3, row: 0.5, c: "blue", t: ["📍 POI 2.0", "Attributes • Context"]}, {id: "F", col: 4, row: 0.5, c: "blue", t: ["📚 Evidence", "Sources • Confidence"]}, {id: "G", col: 5, row: 0, c: "purple", t: ["🎯 Intent engine", "Discover • Buy • Rent"]}, {id: "H", col: 5, row: 1, c: "green", t: ["💡 Opportunity", "Demand • Trend • Value"]}, {id: "I", col: 6, row: 0.5, c: "orange", t: ["🧭 Experience", "Pages • Guides"]}, {id: "J", col: 7, row: 0.5, c: "purple", t: ["🔎 Search / AI", "SEO • GEO"]}, {id: "K", col: 8, row: 0.5, c: "red", t: ["🏠 Leads", "Resultado comercial"]}, {id: "L", col: 9, row: 0.5, c: "blue", t: ["♻️ Learning", "Feedback loop"]} ]; const byId = Object.fromEntries(nodes.map(n => { n.x = 10 + n.col * gap; n.y = 30 + n.row * (H - 130); return [n.id, n]; })); const edges = ["AC","BC","CD","DE","EF","FG","FH","GI","HI","IJ","JK","KL"].map(s => ({s: s[0], t: s[1]})); const svgNS = "http://www.w3.org/2000/svg"; const mk = (tag, attrs, parent) => { const e = document.createElementNS(svgNS, tag); for (const k in attrs) e.setAttribute(k, attrs[k]); parent?.appendChild(e); return e; }; const svg = mk("svg", {viewBox: `0 0 ${W} ${H}`, width: "100%", style: "background:#0f172a;border-radius:8px;font:11px sans-serif"}); const gl = mk("g", {fill: "none"}, svg); edges.forEach(e => { const a = byId[e.s], b = byId[e.t]; const x1 = a.x + nw, y1 = a.y + nh / 2, x2 = b.x, y2 = b.y + nh / 2, mx = (x1 + x2) / 2; e.path = mk("path", {d: `M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}`, stroke: "#94a3b8", "stroke-opacity": 0.25, "stroke-width": 8}, gl); e.len = e.path.getTotalLength(); e.pts = Array.from({length: Math.ceil(e.len)}, (_, i) => e.path.getPointAtLength(i)); }); const L = byId.L, B = byId.B; mk("path", {d: `M${L.x + nw / 2},${L.y + nh} C${L.x + nw / 2},${H - 5} ${B.x + nw / 2},${H - 5} ${B.x + nw / 2},${B.y + nh}`, fill: "none", stroke: color.blue, "stroke-dasharray": "5 5", "stroke-opacity": 0.6}, svg); nodes.forEach(n => { const g = mk("g", {transform: `translate(${n.x},${n.y})`}, svg); mk("rect", {width: nw, height: nh, rx: 8, fill: "#1e293b", stroke: color[n.c], "stroke-width": 2}, g); const t1 = mk("text", {x: nw / 2, y: 21, "text-anchor": "middle", fill: "white", "font-weight": 600}, g); t1.textContent = n.t[0]; const t2 = mk("text", {x: nw / 2, y: 38, "text-anchor": "middle", fill: "#94a3b8", "font-size": 9}, g); t2.textContent = n.t[1]; }); const out = {}; edges.forEach(e => (out[e.s] ??= []).push(e)); const gp = mk("g", {}, svg); const ps = []; const spawn = () => { const start = Math.random() < 0.5 ? "A" : "B"; const e = out[start][0]; const r = mk("rect", {width: 5, height: 5, rx: 1}, gp); ps.push({e, pos: 0, speed: 0.8 + Math.random() * 0.6, off: (Math.random() - 0.5) * 6, r}); }; let raf, tick = 0; const step = () => { if (++tick % 6 === 0) spawn(); for (let i = ps.length - 1; i >= 0; i--) { const p = ps[i]; p.pos += p.speed; if (p.pos >= p.e.pts.length - 1) { const nxt = out[p.e.t]; if (!nxt) { p.r.remove(); ps.splice(i, 1); continue; } p.e = nxt[Math.floor(Math.random() * nxt.length)]; p.pos = 0; } const pt = p.e.pts[Math.floor(p.pos)]; p.r.setAttribute("x", pt.x); p.r.setAttribute("y", pt.y + p.off); p.r.setAttribute("fill", color[byId[p.e.t].c]); } raf = requestAnimationFrame(step); }; step(); invalidation.then(() => cancelAnimationFrame(raf)); return svg; })(); display(menloFlow);33:[] 2e:{"id":"85912b691d111348","slug":"sankey-animation-particles-generation","title":"Sankey animation — particles generation","thumbnail":"d982f549a6391fc21d359717bc8d67250b753631fb311cbb38ae507295679b5d","access_level":"public","create_time":"$D2026-09-29T08:39:00.232Z","update_time":"$D2026-09-29T16:41:46.450Z","view_time":null,"first_public_time":"$D2026-09-29T18:00:25.388Z","has_unpublished_edits":null,"fork":{"id":"8608da05c269491d","slug":null,"title":"Sankey animation — particles generation","owner":{"id":"e279b145125774e2","login":"joao-ricardo-mendes","name":"Joao Ricardo Mendes"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e279b145125774e2","login":"joao-ricardo-mendes","name":"Joao Ricardo Mendes","avatar_url":"https://avatars-next.observableusercontent.com/473f1477d4f5458ddef36ea4017bdc833b5a0e4a48779bb680638ff94a11bf4f","tier":"free_2026"},"version":1414,"publish_version":1414,"role":null,"authored":false,"authors":[{"type":"individual","id":"9de00b5cc1f993d6","login":"joao-ricardo-mendes","name":"Joao Ricardo Mendes","avatar_url":"https://avatars-next.observableusercontent.com/663e6f2450056145784b8fe15976224113e5f289769a026c0679dd7c263a9608","tier":null}],"members":[{"type":"team","id":"e279b145125774e2","login":"joao-ricardo-mendes","name":"Joao Ricardo Mendes","avatar_url":"https://avatars-next.observableusercontent.com/473f1477d4f5458ddef36ea4017bdc833b5a0e4a48779bb680638ff94a11bf4f","tier":"free_2026","role":"editor"}],"comments":[{"id":"300eba0c06c8afb6","reply_to_id":null,"content":"cool","create_time":"$D2026-09-29T08:39:53.109Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"9de00b5cc1f993d6","login":"joao-ricardo-mendes","name":"Joao Ricardo Mendes","avatar_url":"https://avatars-next.observableusercontent.com/663e6f2450056145784b8fe15976224113e5f289769a026c0679dd7c263a9608","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sankey animation — particles generation","cells":[{"id":0,"value":"title = md`# Sankey animation — particles generation\n### Version 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"md`A client on [Codementor](https://www.codementor.io/@oluckyman) wanted to learn how [NYTimes sankey animation](https://www.nytimes.com/interactive/2018/03/19/upshot/race-class-white-and-black-men.html) works. I made this recreation on SVG with code optimized for understanding. \n[Version 1. Particles generation](https://observablehq.com/@oluckyman/sankey-animation-particles-generation) ← _you're here_ \n[Version 2. Tree hierarchy](https://observablehq.com/@oluckyman/sankey-animation-tree-hierarchy) \n[Version 3. Acyclic graph](https://observablehq.com/@oluckyman/sankey-animation-acyclic-graph)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"md`This version illustrates how the particles are created and how they know where to move`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"viewof reset = html`