Bokeh Structure Graph Example

The Bokeh Structure Graph allows one to browse a model and its submodels, and to investigate its attributes.

python

from bokeh.models.util import generate_structure_plot
from bokeh.plotting import figure
from bokeh.io import output_notebook, show
output_notebook()

Create a figure

First we create a figure to analyze.

python

import numpy as np
X = np.linspace(-1,1,100)
Y = X + np.random.normal(size=X.shape)
f=figure(width=400,height=400)
_=f.line(x=X,y=Y,color='blue',line_width=3,alpha=.5)
_=f.line(x=X,y=X,color='red',line_width=3)
show(f)

Simple Public API

python

show(generate_structure_plot(f))

The _BokehStructureGraph class

We create a BokehStructureGraph object from this figure.

python

from bokeh.models.util import structure as st

python

BSG=st._BokehStructureGraph(f)

Properties of the Structure Graph

Networkx graph of submodels

There are three resources available from the BokehStructureGraph. The first is a networkx graph that has one mode for each submodel, identified by the model id, together with the name of that submodel.

python

for x in BSG.graph.nodes(data=True):
    print(x)

Dataframe of attributes with values, types, and docstrings

Next, there is a pandas dataframe that contains one entry for each attribute of each model, together with the value of the attribute, its type (a bokeh property) and its docstring.

python

BSG.property_df
BSG.property_df['doc']=BSG.property_df['doc'].str.replace('\n','')

python

import pandas as pd
pd.set_option('max_colwidth',None)

python

BSG.property_df

Graphical representation

Finally there is a bokeh model that displays the graphical structure of the model and its submodels. Clicking on a node reveals the attributes of that model and their values.

python

show(BSG.model)