Sankey

Tip

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

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]
D3Blocks.sankey(df, color=None, node={'align': 'justify', 'color': 'currentColor', 'padding': 15, 'width': 15}, link={'color': 'source-target', 'color_static': '#d3d3d3', 'stroke_opacity': 0.5}, margin={'bottom': 5, 'left': 1, 'right': 1, 'top': 5}, fontsize: int = 10, title='Sankey - D3blocks', filepath='sankey.html', figsize=[800, 600], showfig=True, overwrite=True, notebook=False, save_button: bool = True, return_html: bool = False, reset_properties=True)

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.

Parameters:

  • df (pd.DataFrame()) –

    Input data containing the following columns:

    • ’source’

    • ’target’

    • ’weight’

  • color (dict or None.) –

    Dictionary containing node with color information.

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

  • link (dict.) –

    Dictionary containing edge or link information.

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

    • ”linkStrokeOpacity” : 0.5

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

  • fontsize (int or dict.) –

    • 10 : All nodes get this fontsize

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

  • margin (dict.) –

    margin, in pixels.

    • ”top” : 5

    • ”right” : 1

    • ”bottom” : 5

    • ”left” : 1

  • node (dict.) –

    • “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

  • title (String, (default: None)) –

    Title of the figure.

    • ’Sankey’

  • filepath (String, (Default: user temp directory)) –

    • File path to save the output.

    • Temporarily path: ‘d3blocks.html’

    • Relative path: ‘./d3blocks.html’

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

    • None: Return HTML

  • figsize (tuple) –

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

    • [800, 600]

  • showfig (bool, (default: True)) –

    • True: Open browser-window.

    • False: Do not open browser-window.

  • overwrite (bool, (default: True)) –

    • True: Overwrite the html in the destination directory.

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

  • notebook (bool) –

    • True: Use IPython to show chart in notebook.

    • False: Do not use IPython.

  • save_button (bool, (default: True)) –

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

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

  • return_html (bool, (default: False)) –

    • True: Return html

    • False: Nothing is returned

  • reset_properties (bool, (default: True)) –

    • True: Reset the node_properties at each run.

    • False: Use the d3.node_properties()

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

Charts