a Sankey Particles visualization of the rCharts Examples data from @timelyportfolio
this bl.ock forks Sankey Particles with only inline styles which in turn is an iteration on the bl.ock Sankey Particles III by @Elijah_Meeks
the #nodejs script createGraph.js reshapes data.json from the Sankey of rCharts Example Gallery bl.ock to the graph.json graph object format expected by our Sankey Particles vis
to run createGraph.js yourself, cd into the directory that contains this bl.ock and run these commands from the terminal:
npm i
node createGraph.js
this will install the dependencies from package.json and then run createGraph.js
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)}`; 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' }) .text(d => d.name) .filter(d => d.x < width / 2) .attr('x', 6 + sankey.nodeWidth()) .attr('text-anchor', 'start'); 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