Sankey

Tip

Hands-on Guide to Create beautiful Sankey Charts in d3js with Python.

Sankey block.

A Sankey chart is a visualization to depict a flow from one set of values to another. The nodes in this case are represented as the rectangle boxes, and the flow or arrows are the links. The width of the arrow is proportional to the flow rate. Sankeys are best used when you want to show many-to-many relationships or to discover multiple paths through a set of stages. For example, the traffic flows from pages to other pages on your website. For demonstration purposes, the “energy” and “stormofswords” dataset can be used. The javascript code is forked from Mike Bostock and then Pythonized.

param df:
Input data containing the following columns:

  • ‘source’

  • ‘target’

  • ‘weight’

type df:

pd.DataFrame()

param color:
Dictionary containing node with color information.

color={‘Nuclear’: ‘#FF0000’, ‘Wind’:’#FF0000’}

type color:

dict or None.

param link:
Dictionary containing edge or link information.

  • “linkColor” : “source”, “target”, “source-target”

  • “linkStrokeOpacity” : 0.5

  • “color_static”: ‘#0f0f0f’ or “grey”, “blue”, “red” etc

type link:

dict.

param fontsize:

  • 10 : All nodes get this fontsize

  • {‘Nuclear’: 10, ‘Wind’: 20}

type fontsize:

int or dict.

param margin:
margin, in pixels.

  • “top” : 5

  • “right” : 1

  • “bottom” : 5

  • “left” : 1

type margin:

dict.

param node:

  • “align” : “left”, “right”, “justify”, “center”

  • “width” : 15 (width of the node rectangles)

  • “padding” : 15 (vertical seperation between the nodes)

  • “color” : “currentColor”, “grey”, “black”, “red”, etc

type node:

dict.

param title:
Title of the figure.

  • ‘Sankey’

type title:

String, (default: None)

param filepath:

  • File path to save the output.

  • Temporarily path: ‘d3blocks.html’

  • Relative path: ‘./d3blocks.html’

  • Absolute path: ‘c://temp//d3blocks.html’

  • None: Return HTML

type filepath:

String, (Default: user temp directory)

param figsize:
Size of the figure in the browser, [width, height].

  • [800, 600]

type figsize:

tuple

param showfig:

  • True: Open browser-window.

  • False: Do not open browser-window.

type showfig:

bool, (default: True)

param overwrite:

  • True: Overwrite the html in the destination directory.

  • False: Do not overwrite destination file but show warning instead.

type overwrite:

bool, (default: True)

param notebook:

  • True: Use IPython to show chart in notebook.

  • False: Do not use IPython.

type notebook:

bool

param save_button:

  • True: Save button is shown in the HTML to save the image in svg.

  • False: No save button is shown in the HTML.

type save_button:

bool, (default: True)

param reset_properties:

  • True: Reset the node_properties at each run.

  • False: Use the d3.node_properties()

type reset_properties:

bool, (default: True)

returns:

  • d3.node_properties (DataFrame of dictionary) – Contains properties of the unique input label/nodes/samples.

  • d3.edge_properties (DataFrame of dictionary) – Contains properties of the unique input edges/links.

  • d3.config (dictionary) – Contains configuration properties.

Examples

>>> # Load d3blocks
>>> from d3blocks import D3Blocks
>>> #
>>> # Initialize
>>> d3 = D3Blocks()
>>> #
>>> # Load example data
>>> df = d3.import_example('energy')
>>> #
>>> # Plot
>>> d3.sankey(df)
>>> #

Examples

>>> # Adjust node and edge properties
>>> #
>>> from d3blocks import D3Blocks
>>> #
>>> # Initialize
>>> d3 = D3Blocks(chart='Sankey', frame=True)
>>> #
>>> # Import example
>>> df = d3.import_example('energy')
>>> #
>>> # Node properties
>>> d3.set_node_properties(df)
>>> print(d3.node_properties)
>>> #
>>> d3.set_edge_properties(df, color='target', opacity='target')
>>> print(d3.edge_properties)
>>> #
>>> # Show the chart
>>> d3.show()

Examples

>>> # Create Custom colors
>>> #
>>> from d3blocks import D3Blocks
>>> #
>>> # Initialize
>>> d3 = D3Blocks(chart='Sankey', frame=True)
>>> #
>>> # Import example
>>> df = d3.import_example('energy')
>>> #
>>> # Custom color the nodes
>>> html = d3.sankey(df.copy(), filepath=r'c://temp//sankey.html', color={'Nuclear': '#FF0000', 'Wind':'#000000', 'Electricity grid':'#FF0000'})
>>> #
>>> # Alternatively:
>>> d3 = D3Blocks(chart='Sankey', frame=True)
>>> df = d3.import_example(data='energy')
>>> d3.set_node_properties(df, color={'Nuclear': '#FF0000', 'Wind':'#FF0000', 'Electricity grid':'#7FFFD4', 'Bio-conversion':'#000000', 'Industry': '#000000'})
>>> d3.set_edge_properties(df, color='target', opacity='target')
>>> d3.show(filepath=r'c://temp//sankey.html')
>>> #

References

Input Data

The input dataset is a DataFrame with three column, source, target and weight.

#                      source            target   weight
# 0      Agricultural 'waste'    Bio-conversion  124.729
# 1            Bio-conversion            Liquid    0.597
# 2            Bio-conversion            Losses   26.862
# 3            Bio-conversion             Solid  280.322
# 4            Bio-conversion               Gas   81.144
# ..                      ...               ...      ...
# 63       Thermal generation  District heating   79.329
# 64                    Tidal  Electricity grid    9.452
# 65  UK land based bioenergy    Bio-conversion  182.010
# 66                     Wave  Electricity grid   19.013
# 67                     Wind  Electricity grid  289.366

# [68 rows x 3 columns]

Charts