Sankey Particles IV

Fixed width edges in Sankey where flow value is indicated by number of particles. Typically a sankey diagram uses the width of the edges to indicate value of flow but here it's done entirely with particles. Drag the nodes to adjust the paths of the particles.

Other examples of sankeys with particles:

Slightly variable speed particles with fixed color based on edge source.
Fixed speed particles transitioning in color from source node color to target node color.
Particles of differing sizes and differing speeds moving in "bursts" between nodes.

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sankey Particles</title>
<style>
.node rect {
  cursor: move;
  fill-opacity: .9;
  shape-rendering: crispEdges;
}

.node text {
  pointer-events: none;
  text-shadow: 0 1px 0 #fff;
}

.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .15;
}

.link:hover {
  stroke-opacity: .25;
}

svg {
  position: absolute;
}

canvas {
  position: absolute;
}

</style>
</head>
<body>
<canvas width="1000" height="1000" ></canvas>
<svg width="1000" height="1000" ></svg>

var margin = {top: 1, right: 1, bottom: 6, left: 1},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
      
var colors = [
   "#01ffff",
  "#f6a7ab",
  "#0b2934",
  "#fcba74",
  "#49d811",
  "#ff0000",
  "#cea9cf",
  "#0137d0",
  "#008fe1",
  "#330120",
  "#00dce6",
  "#7e0050",
  "#f98b10",
  "#9c1bad",
  "#ae1daf"
]

var formatNumber = d3.format(",.0f"),
    format = function(d) { return formatNumber(d) + " TWh"; }

var svg = d3.select("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var sankey = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .size([width, height]);

var path = sankey.link();

var freqCounter = 1;

d3.json("energy.json", function(energy) {

energy.links.forEach(function (d) {
    d.o_value = d.value;
    d.value = 1;
  })
  
  energy.nodes.forEach(function (d,i) {
    d.color = colors[i%colors.length]
  })

sankey
      .nodes(energy.nodes)
      .links(energy.links)
      .layout(32);

var link = svg.append("g").selectAll(".link")
      .data(energy.links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", path)
      .style("stroke-width", function(d) { return Math.max(1, d.dy); })
      .sort(function(a, b) { return b.dy - a.dy; });

link.append("title")
      .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.o_value); });

node.append("rect")
      .attr("height", function(d) { return d.dy; })
      .attr("width", sankey.nodeWidth())
      .style("fill", function(d,i) { return d.color; })
      .style("rx", 5)
      .style("stroke", "none");

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

var linkExtent = d3.extent(energy.links, function (d) {return d.o_value});
  var frequencyScale = d3.scale.linear().domain(linkExtent).range([0.05,1]);
  var particleSize = d3.scale.linear().domain(linkExtent).range([1,5]);

energy.links.forEach(function (link) {
    link.freq = frequencyScale(link.o_value);
    link.particleSize = 2;
    link.particleColor = d3.scale.linear().domain([0,1])
    .range([link.source.color, link.target.color]);
  })

var t = d3.timer(tick, 1000);
  var particles = [];

function tick(elapsed, time) {

particles = particles.filter(function (d) {return d.current < d.path.getTotalLength()});

d3.selectAll("path.link")
    .each(
      function (d) {
//        if (d.freq < 1) {
        for (var x = 0;x<2;x++) {
          var offset = (Math.random() - .5) * (d.dy - 4);
          if (Math.random() < d.freq) {
            var length = this.getTotalLength();
            particles.push({link: d, time: elapsed, offset: offset, path: this, length: length, animateTime: length, speed: 0.5 + (Math.random())})
          }
        }

//        }
/*        else {
          for (var x = 0; x<d.freq; x++) {
            var offset = (Math.random() - .5) * d.dy;
            particles.push({link: d, time: elapsed, offset: offset, path: this})
          }
        } */
      });

particleEdgeCanvasPath(elapsed);
  }

function particleEdgeCanvasPath(elapsed) {
    var context = d3.select("canvas").node().getContext("2d")

context.clearRect(0,0,1000,1000);

context.fillStyle = "gray";
      context.lineWidth = "1px";
    for (var x in particles) {
        var currentTime = elapsed - particles[x].time;
//        var currentPercent = currentTime / 1000 * particles[x].path.getTotalLength();
        particles[x].current = currentTime * 0.15 * particles[x].speed;
        var 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://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js