Folks, Is it possible to create a sankey chart like the one attached using any libraries? Basically, I want to show how many sessions were steered/switched from one network to the other. D3js and Google Charts do not support cyclic representations. For example, If I want to show the session steered from A to B and vice versa, it is not supported by the libraries.

These are the concerns that I have:

1) Cyclic Representation A -> B, B -> A

2) Same nodes in Source and Destination A A B B C C

3) I want to color code each bands to differentiate the categories.

My design is based on this google chart, but modified it as per our requirement: https://developers.google.com/chart/interactive/docs/gallery/sankey

If this is not doable, what are the other alternatives for visualizing the sessions that were steered from one node to the other?enter image description here

I've tried Chord diagram, but people feel that it is not readable.


closed as off-topic by Nick Groeneveld, Mayo, DarrylGodden, Devin, msanford Jul 14 '17 at 17:21

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Nick Groeneveld, Mayo, DarrylGodden, Devin, msanford
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Are you specifically asking for frameworks that will allow you to visualise the node switching? – Andrew Martin Jul 14 '17 at 11:20
  • >If this is not doable, what are the other alternatives for visualizing the sessions that were steered from one node to the other? Am looking for alternative representation because of the fact that the current proposal has implementation challenges. Had to elaborate it to give context. – essdeepee Aug 31 '17 at 6:22

D3 Sankey and D3 Sankey Diagram are two of several packages extending D3 with support for Sankey charts. The latter appears to have the band coloring you're looking for.

Sankey charts by design eliminate cyclic structures by indexing. The "C" in [A,C,B] is the same as in [B,C,A], but the "A" and "B" in the first are different from those in the second.

Having the same nodes in the destination probably requires fudging data for nodes which would not otherwise appear as sources or sinks, but this will vary with the implementation chosen.

Not the answer you're looking for? Browse other questions tagged or ask your own question.