SankeyMATIC Manual

The Basics: Nodes, Flows & Colors

Manual Sections: The Basics: Nodes, Flows & Colors
Labels & Units
Exporting & Publishing
Flow Cross-Check
Syntax Reference
Scaling Diagrams for Comparison
Unusual Facts & Settings

Entering Data

Type one “Flow” per line, as:

Source [Number] Target

Then click Preview. SankeyMATIC will automatically lay out a diagram connecting all Source and Target “Nodes” using Flows with proportional thicknesses.

Example:
Simple sankey example

Note: Node names are case sensitive. (If you refer to the same Node in multiple lines, the names should match exactly.)

Getting Data from a Spreadsheet?

Given data laid out like this in a spreadsheet document:

ABC
1 From To Amount
2 Income Budget 100
3 Budget Expenses 60.75
4 Budget Savings 39.25

Add another spreadsheet column containing a formula like this, applying it to all the necessary rows:

=CONCATENATE(A2," [",C2,"] ",B2)

This will produce:

Formatted
Income [100] Budget
Budget [60.75] Expenses
Budget [39.25] Savings

Then simply copy & paste the data from the new column into the SankeyMATIC form, and voilà:

Spreadsheet example

Setting individual Node colors

You can set one specific Node's color by adding a Node definition line to the Inputs: section, in the format:

:Node-name #Color

Example: Set the “A” Node to red and “C” to green:
Sankey example with custom Node color

Note: Node definition lines can occur anywhere in the input; they are not required to be in a specific order.

Diagram Shape and Size

Tall example Narrow Short example Wide example

Is your data shown best using:

  • A tall rectangle?
  • A wide one?
  • Something closer to a square?

These three examples all share the same inputs.

Experiment with the Diagram Width and Height settings to find what shape communicates your data most clearly.

Space between Nodes

Space = 3 px:
Small Node spacing example
Space = 36 px:
Large Node spacing example
Space = 12 px:
Good Node spacing example

Small spaces between Nodes lead to crowded or muddy diagrams, difficult to parse visually.

Large spaces between Nodes lead to thin spidery Flows, making differences between them harder to distinguish.

Find a happy medium appropriate for making clear comparisons between Flows.

Setting colors for all Nodes

Theme A:
D3 scale category20
Theme B:
D3 scale category20b
Theme C:
D3 scale category20c

In the Colors control panel, for Node Colors you can have SankeyMATIC assign colors to your Nodes from the themes shown on the right.

Or, you can set all Nodes to a single color that you choose.

For help choosing specific HTML color codes, there are many sites you can visit for help; search for HTML color codes.

Setting colors for all Flows

Use Source color:
Example using Source colors
Use Target color:
Example using Target colors
Use one color (gray here):
Example of one Flow color

In the Colors control panel, for Flow Colors you have three choices:

  • Use the Source Node's color: Every Flow will adopt the color of the Node it is flowing from.
  • Use the Target Node's color: Every Flow will adopt the color of the Node it is flowing to.
  • Use a single color: All Flows adopt the same user-specified color.

Note: Since Flows are more transparent than Nodes, the Flow colors will appear to be a lightened version of the Node colors.

To control the lightness/darkness of all Flow colors, use the Flow Opacity slider; the closer you get to 1.0, the stronger the colors will be—however, if any Flows overlap, making them more opaque will make it harder to see the covered-up Flows.

Setting individual Flow colors & opacity

You can set one specific Flow's color by adding a color code to the end of that Flow's data line, like so:

Source [Number] Target #Color

Example: Set one Flow to green, another to blue, and leave a third with its default color:
Sankey example with custom Flow colors

To customize the opacity of an individual Flow, attach to the color code a number between .0 and .9999:

Source [Number] Target #Color.Opacity

Example: Set one Flow to semi-opaque red, another to more-transparent green, and leave a third with its default color & opacity:
Sankey example with custom Flow colors and opacities

Setting Flow colors to inherit from specific Nodes

You can override the general settings for Flow colors mentioned above by defining a Node as coloring the Flows to the left of it, or to the right, or both, by using the special tokens “<<” and “>>”.

Example: Flows from C inherit its custom color:

:Node-name #Color >>

Sankey example with custom Node color inheriting rightward

Example: Flows to C inherit its custom color:

:Node-name #Color <<

Sankey example with custom Node color inheriting leftward

Example: Flows inherit C's color in both directions:

:Node-name #Color >> <<

Sankey example with custom Node color inheriting in both directions