a Sankey Particles visualization of the 2015-2016 fiscal year City of Oakland proposed budget data compiled by @scottistical et al using this R Script
inspired by this twitter conversation
this bl.ock forks Greenhouse Gases Sankey Particles which in turn is an iteration on the bl.ock Sankey Particles III by @Elijah_Meeks
README.md:Using particles to indicate flow between reservoirs in a sankey diagram. This time with particles moving at varying speeds and maintaining the color of the source node. You can drag the reservoirs (the rectangles) to adjust the path of the flows.
Other examples of sankeys with particles:
xxxxxxxxxx<html lang='en'><head><meta charset='utf-8' /><title>Sankey Particles</title></head><body><canvas width='1000' height='1000' ></canvas><svg width='1000' height='1000' ></svg><script src='https://d3js.org/d3.v3.min.js' charset='utf-8' type='text/javascript'></script><script src='d3.sankey.js' charset='utf-8' type='text/javascript'></script><script src='https://npmcdn.com/babel-core@5.8.34/browser.min.js'></script><script lang='babel' type='text/babel'> /* const canvas = */ d3.select('canvas') .style('position', 'absolute'); const margin = { top: 1, right: 1, bottom: 6, left: 1 }; const width = 960 - margin.left - margin.right; const height = 500 - margin.top - margin.bottom; const formatNumber = d3.format(',.0f'); const format = d => `$${formatNumber(d)} million`; const color = d3.scale.category20(); const svg = d3.select('svg') .style('position', 'absolute') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const sankey = d3.sankey() .nodeWidth(15) .nodePadding(10) .size([width, height]); const path = sankey.link(); /* let freqCounter = 1; */ d3.json('graph.json', graph => { sankey .nodes(graph.nodes) .links(graph.links) .layout(32); const link = svg.append('g').selectAll('.link') .data(graph.links) .enter().append('path') .attr('class', 'link') .attr('d', path) .style('stroke-width', d => Math.max(1, d.dy)) .style({ fill: 'none', stroke: '#000', 'stroke-opacity': 0.15 }) .sort((a, b) => b.dy - a.dy) link .on('mouseover', function () { d3.select(this) .style('stroke-opacity', 0.25); }) .on('mouseout', function () { d3.select(this) .style('stroke-opacity', 0.15); }); link.append('title') .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`) const node = svg.append('g').selectAll('.node') .data(graph.nodes) .enter().append('g') .attr('class', 'node') .attr('transform', d => `translate(${d.x}, ${d.y})`) .call(d3.behavior.drag() .origin(d => d) .on('dragstart', function () { this.parentNode.appendChild(this); }) .on('drag', dragmove)); node.append('rect') .attr('height', d => d.dy) .attr('width', sankey.nodeWidth()) .style('fill', d => { d.color = color(d.name.replace(/ .*/, '')); return d.color; }) .style({ stroke: 'none', cursor: 'move', 'fill-opacity': 0.9, 'shape-rendering': 'crispEdges' }) .append('title') .text(d => `${d.name}\n${format(d.value)}`); node.append('text') .attr('x', -6) .attr('y', d => d.dy / 2) .attr('dy', '.35em') .attr('text-anchor', 'end') .attr('transform', null) .style({ 'pointer-events': 'none', 'text-shadow': '0 1px 0 #fff', 'font-size': '12px' }) .text(d => d.name) .filter(d => d.x < width / 2) .attr('x', 6 + sankey.nodeWidth()) .attr('text-anchor', 'start') .style('font-size', '12px'); function dragmove(d) { d3.select(this) .attr('transform', `translate(${d.x}, ${(d.y = Math.max(0, Math.min(height - d.dy, d3.event.y)))})`); sankey.relayout(); link.attr('d', path); } const linkExtent = d3.extent(graph.links, d => d.value); const frequencyScale = d3.scale.linear() .domain(linkExtent) .range([0.05, 1]); /* const particleSize = */ d3.scale.linear() .domain(linkExtent) .range([1, 5]); graph.links.forEach(currentLink => { currentLink.freq = frequencyScale(currentLink.value); currentLink.particleSize = 2; currentLink.particleColor = d3.scale.linear().domain([0, 1]) .range([currentLink.source.color, currentLink.target.color]); }); /* const t = */ d3.timer(tick, 1000); let particles = []; function tick(elapsed /* , time */) { particles = particles.filter(d => d.current < d.path.getTotalLength()); d3.selectAll('path.link') .each( function (d) { // if (d.freq < 1) { for (let x = 0; x < 2; x++) { const offset = (Math.random() - 0.5) * (d.dy - 4); if (Math.random() < d.freq) { const length = this.getTotalLength(); particles.push({ link: d, time: elapsed, offset, path: this, length, animateTime: length, speed: 0.5 + (Math.random()) }); } } // } /* else { for (let x = 0; x<d.freq; x++) { let offset = (Math.random() - .5) * d.dy; particles.push({link: d, time: elapsed, offset: offset, path: this}) } } */ }); particleEdgeCanvasPath(elapsed); } function particleEdgeCanvasPath(elapsed) { const context = d3.select('canvas').node().getContext('2d'); context.clearRect(0, 0, 1000, 1000); context.fillStyle = 'gray'; context.lineWidth = '1px'; for (const x in particles) { if ({}.hasOwnProperty.call(particles, x)) { const currentTime = elapsed - particles[x].time; // let currentPercent = currentTime / 1000 * particles[x].path.getTotalLength(); particles[x].current = currentTime * 0.15 * particles[x].speed; const currentPos = particles[x].path.getPointAtLength(particles[x].current); context.beginPath(); context.fillStyle = particles[x].link.particleColor(0); context.arc( currentPos.x, currentPos.y + particles[x].offset, particles[x].link.particleSize, 0, 2 * Math.PI ); context.fill(); } } } });</script></body></html> https://d3js.org/d3.v3.min.js
https://npmcdn.com/babel-core@5.8.34/browser.min.js