D3 Examples - Sankey Particles

Sankey Particles

Using particles to indicate flow between reservoirs in a sankey diagram. Original sankey diagram and layout done by Mike Bostock.

This method takes advantage of a couple of really useful built-in SVG functions: svg:path.getTotalLength() and svg:path.getPointAtLength() that allows you to calculate where a particle would need to be along a path. Because this is animation and the individual particles don't need to be interacted with, the particles are drawn with canvas, though you can drag the nodes around to see the particles change routes.

xxxxxxxxxx
 
​
<!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: .05;
}
​
.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>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="d3.sankey.js" charset="utf-8" type="text/javascript"></script>
​
    <script type="text/javascript">
​
var margin = {top: 1, right: 1, bottom: 6, left: 1},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
var formatNumber = d3.format(",.0f"),
    format = function(d) { return formatNumber(d) + " TWh"; },
    color = d3.scale.category20();
​
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) {
​
  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.value); });
​
  var node = svg.append("g").selectAll(".node")
      .data(energy.nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .call(d3.behavior.drag()
      .origin(function(d) { return d; })
      .on("dragstart", function() { this.parentNode.appendChild(this); })
      .on("drag", dragmove));
​
  node.append("rect")
      .attr("height", function(d) { return d.dy; })
      .attr("width", sankey.nodeWidth())
      .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
      .style("stroke", "none")
    .append("title")
      .text(function(d) { return d.name + "\n" + format(d.value); });
​
  node.append("text")
      .attr("x", -6)
      .attr("y", function(d) { return d.dy / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .attr("transform", null)
      .text(function(d) { return d.name; })
    .filter(function(d) { return 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);
  }
​
  var linkExtent = d3.extent(energy.links, function (d) {return d.value});
  var frequencyScale = d3.scale.linear().domain(linkExtent).range([1,100]);
  var particleSize = d3.scale.linear().domain(linkExtent).range([1,5]);
​
​
  energy.links.forEach(function (link) {
    link.freq = frequencyScale(link.value);
    link.particleSize = particleSize(link.value);
    link.particleColor = d3.scale.linear().domain([1,1000]).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.time > (elapsed - 1000)});
​
    if (freqCounter > 100) {
      freqCounter = 1;
    }
​
    d3.selectAll("path.link")
    .each(
      function (d) {
        if (d.freq >= freqCounter) {
          var offset = (Math.random() - .5) * d.dy;
          particles.push({link: d, time: elapsed, offset: offset, path: this})
        }
      });
​
    particleEdgeCanvasPath(elapsed);
    freqCounter++;
​
  }
​
  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();
        var currentPos = particles[x].path.getPointAtLength(currentPercent)
        context.beginPath();
      context.fillStyle = particles[x].link.particleColor(currentTime);
        context.arc(currentPos.x,currentPos.y + particles[x].offset,particles[x].link.particleSize,0,2*Math.PI);
        context.fill();
    }
  }
​
​
});
​
    </script>
</body>
</html>
    