I'd like to have something like yUML.me where you can call URL with diagram parameters and get dynamic image as response.

http://yuml.me/diagram/dir:td/class/[ACME Project]<[Graphic Design],[ACME Project]<[Back-end Coding]

Or an API perhaps? Would allow automated sankey diagram generation based on data changes.

Tricky parts will be:

• how exactly to specify how big the text should be & where it goes & what color, font, etc.
• what effect these then have on the available space for the actual flow diagram
• how to make this clear to the user

Firstly, thanks for creating such a useful project!

It would be great to be able to use percentages of either the parent or child nodes instead of absolute values.

Could probably be indicated by the syntax Source [10%<] Destination where the arrow denotes which node the percentage is calculated on.

Also, adding onto issue #21 allow a node be the remainder of a parent or child node. i.e.

A [5] Sum
B [5] Sum
Sum [2] Out
Sum [-] Remainder

Where Remainder would be 8. Probably not the best syntax here, but just a suggestion

At this point (Early 2020), a number of web servers support HTTP/2 out-of-the box, and that can be paired with Let's Encrypt. Caddy does both, out-of-box.

sankeymatic.com/build svg generates broken svg

This page contains the following errors:
error on line 1 at column 534: Entity 'rarr' not defined
Below is a rendering of the page up to the first error.

To reproduce, go to sankeymatic.com/build.
Recover the SVG and save as demo.svg
Browse to file:///demo.svg
The error message above appears.

Workaround
use s/&rarr//g on the file to make the svg visible again.

Make it possible to export all the parameters of a diagram with one click, so a diagram can be fully specified with one chunk of JSON (or simple text, maybe).

Allow the import of that same exported spec with one click (or maybe POST).

Among other useful effects, this would let users save diagrams in progress and come back to them later.

For any diagram in process, provide (either upon request or on every change) a URL which a person could use to return to the graph in its current state.

This would let people:

• share graphs with each other easily with the source flows and the config options intact (enabling fairly easily collaboration)
• save graphs-in-progress for continuing work later

Edited, 2023-11:
Let's not take this approach: "One implementation of this might be to save the complete JSON in a server-side DB. Then hand out a short-url-ish token for loading it, which would fill in the form fields etc."

Instead, this ought to be able to be done 100% on the client-side without passing any info to the server.

(There is one path where you'd end up exposing data to the server (I believe), and that's when you click or paste a URL with all the data embedded. The complete URL will then end up in the server's request log, I expect.)

Node labels seem to be left aligned when nodes are left of centre in the diagram and right aligned when the notes are right of centre.

This causes some problems with understanding the nodes.

Can they be always at the left/right or maybe make this configurable.

Thanks

It would be convenient for the diagram to update live as you make changes to any of the inputs. Currently, without hitting the preview button I have to click outside the form/inputs section for changes to be seen in the diagram.

I realize if the process is browser heavy it makes sense to do processing as infrequent as possible and how it works currently does that. An option to enable live editing would be very helpful.

In the mean time running the following in the browser console does the trick for me

document.getElementById("flows_in").onkeyup = process_sankey;

Some nodes can appear correctly in one of several columns.

Imagine a source node for a node in column 4 -- it could correctly appear in column 1, 2, or 3.

• Currently (June 2016), such a node is forced into column 1.
• After implementing #11, un-checking the 'Justify' option will put such a node into column 3 (one before its target). But there is still no way for the user to say that they want it in column 2.

Add & implement a syntax for specifying a column for a node. Straw example:

• :nodename #069.3 nodelevel=2
• (My first instinct is col=2 or column=2 instead, but since diagrams may eventually have a vertical-orientation option, 'column' will be confusing at that point. Other possible labels: level, group, nodegroup...)

There must be some error-checking involved here as well. If the user specifies an invalid nodegroup (say, 4 or 5 or 6 in the current example), we should toss out the user's value and handle it in the default manner (1 or 3 here, depending on the justification setting).

• Ideally we can then give the user a helpful warning message about their invalid input as well, though that is less crucial.

Currently all graphs start from the top and are spread out downwards as the layout iterates.

This works fine for ordinary Sankeys but doesn't look good for Funnels (see #15).

Give the user a layout option to begin the layout process from the vertical-center of the diagram, or the bottom, or the top.

The Sankey library used here lets us choose:

• whether to justify all endpoints to the right and
• whether to justify all origins to the left

Give the user easy access to these controls.

The PNG-generation part of the proceedings is one of the slowest parts, particularly when the user has chosen "4x" rendering.

• Split the rendering into its own separate async call (probably using setTimeout) so the user can see their diagram changes faster.
• Give the user some indication that the PNG render is in progress.

This probably needs another input screen entirely, but much of the same underlying JavaScript.

• Take as input a spreadsheet listing multiple years of a budget.
• Produce a separate Sankey diagram for each year's budget, holding the scale constant so that the same amount across years appears to be the same height.
• Provide plenty of options for customizing colors, etc.
• Produce each graph as a separate item, so they can be arranged as the user wishes
• 3 potential modes -- all the income sources, all the expenses, or both.
• For bonus points:
  • To make small-multiples more practical, support leaving out labels from each graph and producing a Legend instead
  • Keep track of the inflation multiplier so that years can be compared in constant dollars

Currently labels are always placed using an 'inner' orientation:

• On the left half of the diagram, labels are always placed to the right of nodes,
• On the right half, labels are placed to the left.

This can lead to confusing label placement, including unwanted overlaps.

Give the user the ability to say all labels should be on the left (or on the right) regardless of which node column they are for.

In either of those cases, the Margins will have to be manually updated to fit whatever labels are appearing. (Auto-adjusting the margins for the specific labels in the diagram may come later, but not in this first version.)

Enable colour gradients from a flows source node to the target node like this example.

Immediately-Invoked Function Expression.

To avoid polluting the global namespace any more than we actually have to.

Created my first Sankey chart with 8 input nodes and 12 output nodes.

Only 5 of the input nodes show on the chart. I've changed order of input nodes. > Same output.

List of Flows.xlsx

Thank you.

When I used "Rest" (without quotation marks) as an end node, it scrambled the whole diagram in a weird way. It was definitely the word itself, the position in my list didn't make a difference, but once I changed one letter it worked normally.

Might be because Rest is some predefined function in JS or SVG or whatever.

Any label might be worth emphasizing with a different color, size, or style.
Decide on & implement a syntax for specifying them.

At the moment, AFraction [2000] BFraction takes 2000 from AFraction and sends it to BFraction.

However, there are some cases where the flow is desired to change size between the beginning and end. The most obvious is when nodes are desired as percentages. In that case, the "total" in each layer may vary, due to reproduction/destruction between layers.

Please add an option for explicitly different bounds, like AFraction [2000, 1800] BFraction, or a "ratio" option, like AFraction [2000]/2 BFraction, or add the option to size all nodes as percentages.

Allow top-to-bottom or bottom-to-top flow diagrams.

Part of this is a simple coordinate transform.

The hard part will be the placement of labels; simply rotating those won't look good.

This looks related to #11.

Using these data

A1 [100] B1
A2 [100] B1

A1 [100] B2

B1 [60] C1
B1 [60] C2
B1 [80] C3

I would like to align B2 to B1, even if it has no children.

Normally I get this:

but I would like to get this:

This could be easily solved if issue #35 has an answer:
I would create a dummy node (say B2DUMMY) after B2, same value, transparent and flow set as "target" (so transparent). As the dummy node would have no text to show, it would be completely invisible.

In this example it is what I can get, but I need the the text B2DUMMY:100 to disappear:

A1 [100] B1
A2 [100] B1

A1 [100] B2

B1 [60] C1
B1 [60] C2
B1 [80] C3

B2 [100] B2DUMMY

:B2DUMMY #ffffff.0 >>

Add a function similar to the PNG export where the user can copy (or save to a file) the SVG version of the graph.

Obviously we need to retain nodes, flows, and their colors.

Further features to include in the SVG for which it would be nice to give the user control over their inclusion:

• The Tooltips on flows & on nodes
• Change in opacity when hovering over the flows
• Draggability of nodes, including the subsequent re-rendering of the flows
  • Also: Control over vertical-only draggability vs. vertical+horizontal

Hi
First of all kudos to the wonderful tool you have developed to plot sankey diagram.
I would like to know if there would be any update / patch in the coming weeks for the issue of output resetting totally for even any minor tweaks or adjustments made to the three categories (spacing/colors/ labels) in the middle of plotting a diagram. The user wont have a precise idea of how much length (or) color of flow (or) the font size of the label the diagram would require and hence a sub-task is being done twice or thrice taking additional time. Please fix this at least for the "show labels" if this could not be done for all the categories.
Thanks
Ashok

there is a very small value for some nodes, and I try to change the places of there nodes. However, they are two small for me to drag them. What should I do?
If you know the answer, please tell me, thanks a lot for the help.

Move to the newest versions of:

• d3
• canvg

Enabling horizontal dragging of nodes was a mixed blessing; users may want to preserve the exact horizontal spacing they already have without risking putting something out of position.

Add a checkbox which makes the draggability of nodes only work in a vertical way.

(Will combine well with issue #11, which will make it unnecessary to move nodes horizontally to make a graph compact.)

Setting
Node1 [0] Node2,
Node1 goes to the rightmost position and Node2 is missing.
It is possibly a mistake because it SHOULD accept 0, leaving Node2 tag (and perhaps with a very thin flow line, even if it should theoretically be invisible).

Example flow

         3
12 <
         9

Here, if only 3 and 9 were specified, then sankeymatic calculates the 12.

Is there a way to specify the Order of the Nodes?

Is there a logic behind it? (alphanumeric of node label, frequency ascending, or random)?

I would like to specify an order to put some nodes at the bottom area and re-arrange it.

NINJA EDIT: I just learned about dragging and ordering via 'click-and-drag', but my problem then is the re-ordering doesn't occur, so it kinda just overlays or floats in front of other nodes.

Instead of insisting on the SankeyMATIC format for specifying flows, allow people to just copy some cells from a spreadsheet and paste them in & get the results they expect.

I believe the right way to support this would be to expect three columns of pasted data.

• Figure out which column has the numeric values. Could be column 1 or 2 or 3
• Once we know which two columns are not the values, presume the first column of the two is the Source & the second is the Target.
• Rearrange the values into the SankeyMATIC syntax
• Paste the result into the data-editing field.
• Handle sensing & skipping a header row, maybe.

Currently the order of nodes is determined by relaxing the graph over several iterations, with nodes usually ordered from largest to smallest (top to bottom).

This is usually fine. However, in some cases it would be nice to give the user an option to set their own ordering for the nodes. (I think this would just mean using the order given in the source rows, not forcing them to drag things around in a list.)

Sankey diagram is showing the sequence of nodes randomly. Is it possible to show the nodes in the ascending order of data entered, so that it displays passenger boarding from a stop and alighting at a stop using bus form first stop to last stop sequentially?

Come up with an intuitive syntax for these extra features:

• Substituting text for Node labels, as in:
  • within the flow specs, always use a nice short unique name ('xyz')
  • in the Node spec, provide the actual longer name for display use ('Xtra Yellow Zippers')
• Suppress the display of a node's name in the graph
  • e.g. for a budget, we might put the total in the informative Title and not need to label the middle node at all.

Would it be possible to enable high resolution images to be exported? I need at least 300 dpi for printing on an A0 poster.

Hi Steve,
great job! I really appreciate this project.
Sometimes I embed the flow diagrams in presentations with non-white background.
It would be nice to have an export option with transparent background for PNG.

Idea:
add transparent check box in "Colors:" > "Background Color:" section

Thanks
Eugen

We've stopped crashing when the user enters a cycle, but we don't alert them to the cycle's presence.

Since the rendering of cycles is not great right now, it would be good to at least call the user's attention to any cycles present.

Sankeys are sometimes used to show funnels, i.e. flows where you start with a large population and monotonically decrease the amounts as a process moves through phases.

These sorts of graphs can be made easier than SankeyMATIC currently makes them, possibly with a simplified syntax.

Related:

• Issue #4 which would let you display a funnel vertically.
• Issue #16 would let you center each chunk of the funnel, making it look much better.

As I am a less-than-newbie in JS (I work with Python+Flask), it is difficult for me to understand how to use SankeyMatic to generate graphs programmatically (not manually) or even if it provides such a feature.

The ideal would be to read a JSON file with the whole configuration and generate the sankey. Is this possible?

At the moment I stripped down http://sankeymatic.com/build/ hiding all the setting fields:
i.e. I am setting canvas_width with <input id="canvas_width" type="hidden" value="600">
With Flask it is easy to fill out the HTML template with the proper parameters, but I am searching for a cleaner way to do it.

Currently the generated sankey does not present flow values.

However for graphs, where nodes have both more ouflows and inflows it is important to visualise flow value selectively.

Proposal declaration implementation:

Income [100] Budget
renders without flow value label, i.e. as is now

Income [!100] Budget
renders with flow value label on the Income side of the flow

Income [100!] Budget
renders with flow value label on the Budget side of the flow

Income [!100!] Budget
renders with flow value label centered on the flow

Allow users to choose colours for individual nodes and thereby upstream/downstream flows. Would be useful for (e.g.) election results, where certain parties are associated with certain colours.

When there is a lot of quantity value differences between 2 nodes, the draggable graphic shows an ultra thin node fo the lower value.
This is a problem when you try to drag this node to re-locate, as it is sometimes impossible to catch it with the mouse.

Although the real graphic thickness of the flow is related to the node value, Could it be possible to have a draggable solution to handle this ?

The below-mentioned files are missing in the "build" directory, due to which the offline use of this application does not work. It requires manually downloading and adding files inside "build" directory.

1. d3.v2.js
2. sankey.js
3. canvg.js
4. rgbcolor.js

Follow-up to issue #5.

Currently: after any nodes are dragged into new positions, any re-rendering of the graph will re-set the nodes to their original positions.

Add the following capabilities:

• Add a switch so that when previewing changes to the graph, the nodes will not move from their present positions -- only the node & flow sizes will change.
  • If new flows or nodes are added to the graph's source data, this may be difficult to support -- they have to go somewhere. Possibly the capability should only work when flows are being modified, not added.
  • Deleted flows don't present the same problem, they can just disappear.
• When saving a graph's specification, include the current positions of the nodes.
• When rendering a graph from a saved spec, force the nodes into the specified positions. (Always? I think so, yes.)

Allow users to choose a dot or a comma as the Decimal mark.
While we're here, also allow users to choose a Thousands separator of a comma or space or dot.

(I picked these options as the most commonly-used ones from https://en.wikipedia.org/wiki/Decimal_mark#Examples_of_use )

Look out for: someone picking the same item from both menus, if implemented as separate menus.

Simpler might be to just provide some constrained options in one Number Style dropdown, like this:

• 1,234.56
• 1.234,56
• 1 234,56
• 1 234.56
• 1234.56
• 1234,56

Somehow enable good-looking cycles in flow diagrams.

Various folks have begun solutions to this, but I haven't seen one I love yet.

Now each node has a tag used as link reference: Node1 [100] Node2

Node1 and Node2 are shown on the plot.

But what is I want to read something else on the graph, instead of the node tag?

I would like, for example, to be able to set the nodes as:

Node1 [100] Node2

:Node1 $text_to_show_for_node1
:Node2 $text_to_show_for_node2

It would even be nice if text could be multiline, with the first line always bold, and the following lines normal. This would allow to show any kind of parameters/values associated to the node (first line being the id we chose, and the following lines the values). A markup language to define the text to show would make everything very flexible.

Or is there a workaround I didn't think about?

the following data:
Requester [45] Team1
Team1 [10] Team2
Team1 [35] Customer
Team2 [35] Customer
Requester [25] Team2

should yield a pretty simple diagram. And yet, the link from Team1 to Team2 needlessly crosses over the link from Requester to Team2, making the diagram hard to read. No amount of dragging or changing the order of the data items seems to have any positive effect.

Sample diagram with this incorporated: http://www.iea.org/Sankey/