Sankey

A Sankey diagram is a visualization used to represent the flow of quantities between different sets of values. It's particularly useful for showing how items are distributed or transferred across multiple stages or categories. The diagram uses nodes to represent the different categories and links (arrows) to represent the flow, with the width of the links proportional to the quantity being transferred.

Parameters

In addition to all of the standard parameters the following apply to pie charts.

dataList[dict], DataFrame, Series

The format of the data is a JSON dictionary, with two elements: nodes and links. Here is an excerpt from the data file, above:

{
  "nodes": [
    { "name": "Solar", "width": 100 },
    { "name": "Wind", "width": 120 },
    { "name": "Hydro", "width": 80 },
    { "name": "Nuclear", "width": 90 },
    { "name": "Coal", "width": 200 },
    { "name": "Natural gas", "width": 210 },
    ...
  ],
  "links": [
    { "source": "Solar", "target": "Electricity", "value": 100 },
    { "source": "Wind", "target": "Electricity", "value": 120 },
    { "source": "Hydro", "target": "Electricity", "value": 80 },
    { "source": "Nuclear", "target": "Electricity", "value": 90 },
    { "source": "Coal", "target": "Electricity", "value": 200 },
    { "source": "Natural gas", "target": "Electricity", "value": 130 },
    { "source": "Natural gas", "target": "Heat", "value": 80 },
    ...
  ]
}

link_colorString

The link_color parameter determines, as the name suggests, how to color the links. The default value of "target" uses the same color as the target node. The value "source-target" uses a gradient of the colors of the nodes that it connects. The "source" option colors the link the same as the nodes on the beginning of the link.

node_alignstring

This parameter, which defaults to "left", determines where to place each node. The possible values are "left", "right", "center" and "justify".

Examples

Here's an example of a Sankey diagram from HTML/Markdown:

<skey
  width=600
  height=225
  path="data/energy.json"
  format="json"
  colors="cc.glasbey"
>
</skey>

which produces this:

As described in the color palette section, we have used a color palette from Colorcet. As an aside, this is a particularly good option for this chart type.

Here is the same chart as above, but using source-target to color the links: