Alluvial diagram example

[Nick Rabinowitz]

Hello -

I was interested in the alluvial diagrams discussed in this StackOverflow question (http://stackoverflow.com/questions/8222356/how-to-generate-a-graph-diagram-like-google-analyticss-visitor-flow/8290846#8290846), and I had a long plane ride, so I made an example using d3:

Static: http://nickrabinowitz.com/projects/d3/alluvial/alluvial.html

Animated: http://nickrabinowitz.com/projects/d3/alluvial/alluvial-dynamic.html

I thought I'd send it to the list, in case anyone was interested or wanted to offer feedback. If it seems useful enough I could add it to d3/examples and send a pull request - let me know.

-Nick

[Kai Chang]

Very cool. Similar to this Sankey diagram I saw recently on the list (Raphael):

http://tamc.github.com/Sankey/

I do prefer the layout of the Alluvial diagram where all of the flows enter all of the nodes at each step. The Sankey diagram looks messy to me now, with flows skipping steps for various reasons.

[Mike Bostock]

> http://nickrabinowitz.com/projects/d3/alluvial/alluvial.html

Cool, thanks for sharing! I've been hacking on a Sankey layout for D3,
but I want to spend a bit more time optimizing the layout algorithm.
Hopefully I'll get a chance to post the code this week.

Mike

[Chris Viau]

Teaser: http://yfrog.com/gz1d0tp

[D3 Dev]

Can't wait for this!

Will it be able to (with potentially some extension) render Sankey's that have a more hand-drawn feel to them like the following?

http://www.eia.gov/totalenergy/data/annual/pdf/sec1_3.pdf

[damin]

Hi Mike,
Can you please share your current work on Sankey? I have exciting
and important application of it in airline world.

D3 is elegant, simple and powerful.

Thanks
Dick

On Nov 27 2011, 11:06 pm, Mike Bostock <mbost...@cs.stanford.edu>
wrote:
> >http://nickrabinowitz.com/projects/d3/alluvial/alluvial.html
>
> Cool, thanks for sharing! I've been hacking on aSankeylayout for D3,

[fabian lang]

really cool! is there an example with real data (json, cvs...)? or a clue on how two implement the data?
 

[Mike Bostock]

> is there an example with real data (json, cvs...)?

http://bost.ocks.org/mike/sankey/
https://github.com/d3/d3-plugins/tree/master/sankey

Mike

[fabian lang]

i already took a look at the approach with sankey.js. but it seems to be less flexible when it comes to loading data dynamically / filtering data and visualizing developements with animated transitions - compared to rabinowitz' example. do you know of an example using rabinowitz' or similar that loads real data? or any clues?

[Nick Rabinowitz]

I'm glad you think this is helpful (though Mike's is probably more robust). I haven't looked at this in a bit, but I believe you can simply look at the example code and call

JSON.stringify(data, false, ' ')

in the console to see the format my fake data uses. You could probably use an upstream version of this as well - insert the same console call before the data processing step to see what my base node/link data looks like. As I recall, making the fake data was at least half of the work required to produce this :).

-Nick