sankey chart particle

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

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