31: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) } }) } }) }32: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) } }33:[] 2f:{"title":"Sankey animation — particles generation","cells":[{"id":0,"value":"title = md`# Sankey animation — particles generation\n### Version 1`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":939,"value":"viewof reset = html`