All examples By author By category About

emeeks

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.