rCharts Examples Sankey Particles

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

Original `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:

forked from micahstubbs's block: rCharts Examples Sankey Particles

<!DOCTYPE html>

<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>

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');

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