block by emeeks 21f99959d48dd0d0c746

Sankey Particles

Full Screen

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.

index.html

d3.sankey.js

energy.json