StreamGraphs are probably one of the most visually impressive visualization algorithms out on the web, made popular from the New York Time’s “Ebb and Flow of Movies” several years ago.  While the algorithms have been available open-source for Processing for a while now, it did require Processing and Java to use them.  Now, you can try them out in just JavaScript thanks to the efforts of Jason Sundram who has uses the Processing.js code to create Streamgraph.js, and even added a few new features:

  • Dynamic sizing (sized to fit the Canvas element it’s on)
  • Settings. These can be dynamically changed, and easily set outside of the streamgraph code.
  • Zoom. You can click and drag to zoom in, and press Escape to zoom out.
  • Hover. The selected layer changes color, and the active layer name and data point is displayed at the top of the screen.
  • Another color option that offers a bit more variation.
  • Examples (including the original beautiful examples).

It isn’t quite up to the New York Times version, but still impressive.

via streamgraph.js.