Does anybody ever created examples of a Sankey Diagram?

spandl

I would like to create a Sankey Diagram (https://en.wikipedia.org/wiki/Sankey_diagram) - like graphic. In fact even less complicated, it is more of a funnel visualization, whereby a single process has to undergo several steps and I would like to visualize which processes made it to the end and which one have been terminated on the way or a still in the process of being terminated.

I would be grateful if someone could point me to an example created via processing or p5.

I have found examples for the 3D library and Google Charts, but would prefer to use p5 https://bost.ocks.org/mike/sankey/

Thanks ralph

jeremydouglass

@spandl -- You link to the D3 example of a Sankey diagram. Is a funnel version of that what you are trying to accomplish? Do you want it to be interactive, as in the D3 example? Are there specfic things that it should do that the D3 example doesn't already do?

A simple static sankey only requires rectangles and bezier curves (if you want the curving pipes. You can build curve shapes to connect the rectangles using bezierPoint.

• https://processing.org/reference/bezierPoint_.html

For example, use beginShape / endShape, and inside it declare a list of vertex points by running through the demo curve in one direction, then shifting down by the width of the tube and running through the same list backwards.

spandl

Thanks Jeremey,

I was actually looking for some code examples to see how I need to prepare my data. I was sure someone already must have done this and was looking for overall inspiration/concepts.

I might just do it the other way around, prepare my data and see if I can connect the points with the curves and post the result here.

Thanks again.

jeremydouglass

@spandl --

A classic way of modeling Sankey data is in triples.

source, target, value
1, 5, 75
5, 6, 85
2, 3, 1
3, 4, 1
1, 3, 93
1, 4, 40
1, 2, 48
2, 4, 1
4, 5, 1

The source and target are element ids -- the value is the width of the pipe between a given source and target. In your case, it could for example be a percentage, either out of 100 or as a float out of 1.0

Notice the data isn't sorted above, although you could easily sort it -- consider loading it from CSV using loadTable() and then running sort.

Drawing is a network diagram walk -- assuming there is one entry point. Start by drawing node 1 on the left, move right one column rank to draw the nodes it is connected to, then move right to draw the nodes they are connected to. Repeat until everything is below everything else (assuming this is acyclic directed graph data.

If you have connections that skip column ranks -- going from 1-3, for example -- and/or connections that merge (1->2, 2->3, 1->3), then you may either need another data column where you assign a known rank to each element, OR you need to discover the rank:

1. Find the children of 1.
2. Find the grandchildren.
3. Any child that is also a grandchild, demote to grandchild.
4. Repeat: find the great-grandchildren; any grandchild that is also a great-grandchild, demote. Et cetera.

Again, assuming directed acyclic data, that should give you a column rank for where to draw each node.

If your flows are all percentages derived from 100% on the left then each rank should add up to 1.0 or less, and you can map the value column directly to drawing size. If they aren't -- especially if external flows can come in mid-diagram -- then you may need to sum each rank and find the widest one in order to know how to scale your drawing.

Hope this was helpful.

jeremydouglass

P.S. There is also some great documentation of the D3 Sankey implementation (which is multi-pass and considerably more robust) here:

https://github.com/d3/d3-sankey

dehyde

Bump

I''m also looking for any Sankey Diagram created in Processing as a reference. I'm interested in using processing over D3 because of computational issues (D3 can only carry so much and I have hundreds of thousands of data rows).

jeremydouglass

Here is a simple past example that might be relevant -- it maps two ranks using bezier curves. I found it searching for "Sankey":

• https://forum.processing.org/two/discussion/11448/negative-space-using-bezier

jeremydouglass

While not a Sankey diagram, people working on Sankey might aslo be interested in the layout methods of this recent discussion of a parallel coordinates diagram:

• https://forum.processing.org/two/discussion/26470/how-to-create-this-out-of-data-parallel-design-data-visualization