Treemap


Treemap block.

A Treemap chart is a visualization to hierarchically show the data as a set of nested rectangles. 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’

  • ‘level0’, ‘level1’, ‘level2’, ‘weight’

type df:

pd.DataFrame()

param margin:
margin, in pixels.
  • {“top”: 40, “right”: 10, “bottom”: 10, “left”: 10}

type margin:

dict.

param border:
border properties.
  • {‘type’: ‘solid’, ‘color’: ‘#FFFFFF’, ‘width’: 1}

type border:

dict.

param font:
font properties.
  • {‘size’: 10, ‘type’:’sans-serif’, ‘position’: ‘absolute’}

type font:

dict.

param title:
Title of the figure.
  • ‘Treemap’

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].
  • [1000, 600]

  • [None, None]: Use the screen resolution.

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')
>>> df = d3.import_example('animals')
>>> #
>>> # Plot
>>> d3.treemap(df)
>>> #

Examples

>>> # Load d3blocks
>>> from d3blocks import D3Blocks
>>> #
>>> # Initialize
>>> d3 = D3Blocks(chart='Treemap', 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)
>>> print(d3.edge_properties)
>>> #
>>> # Show the chart
>>> d3.show()

Examples

>>> # Add tooltip
>>> #
>>> # Intialize Treemap
>>> from d3blocks import D3Blocks
>>> d3 = D3Blocks(chart='treemap', frame=False)
>>> #
>>> # Import example
>>> df = d3.import_example('energy')
>>> #
>>> # Set node properties
>>> d3.set_node_properties(df)
>>> #
>>> # Set tooltip for specific nodes
>>> d3.node_properties['Bio-conversion']['tooltip'] = 'Title: Bio conversion Operations'
>>> d3.node_properties.get('Losses')['tooltip'] = 'losses tooltip'
>>> #
>>> # Set edge properties
>>> d3.set_edge_properties(df)
>>> #
>>> # Show chart
>>> d3.show(filepath=r'c://temp//treemap.html')

References

Input Data

The input dataset is a DataFrame that is hierarchically ordered from left to right. The number can be 3 levels and the column weight is obligatory.

#                      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]

Three levels and the column weight.

#    group1  group2 group3  weight
# 0  Animal  Mammal    Fox   35000
# 1  Animal  Mammal   Lion   25000
# 2  Animal    Fish    Cod   10000
# 3   Plant    Tree    Oak    1500
# 4  Animal    Fish    Ape    1750

Charts