Plotting

Python has a large collection of plotting libraries and while any content that rendens in a Jupyter Notebooks will render in Jupyter-flex dashboards there are some things to consider for plots to look the best they can.

Interactive (JS) libraries¶

Since jupyter-flex dashboards have a web frontend, either static .html files or a running webserver, in general any library that outputs a web based plot will look better, for example: Altair, plotly, Bokeh and bqplot.

Responsive¶

For plots to look great in flex dashboards they should be responsive, that means that they should ocupy all the space that the parent html components has instead of having a static width and heigth.

A responsive behaviour is usually not the default for most plotting libraries but it's very easy to change this even if the way to do this changes from library to library, here are some tips to make this happen in the most popular plotting libraries.

Altair¶

Starting from Altair version 4.0 it's possible to make a chart have responsive width and height by setting the width and height properties to "container".

For example:

In [1]:

import altair as alt
from vega_datasets import data

import altair as alt from vega_datasets import data

In [2]:

source = data.cars()

plot = alt.Chart(source).mark_circle(size=60).encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
    tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']
)

source = data.cars() plot = alt.Chart(source).mark_circle(size=60).encode( x='Horsepower', y='Miles_per_Gallon', color='Origin', tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon'] )

In [3]:

plot

plot

Out[3]:

If we tag the previous cell with body then the size will be static and not responsive, to make it responsive we just add a bit of code:

In [4]:

body

plot.properties(
    width='container',
    height='container'
)

plot.properties( width='container', height='container' )

Out[4]:

This could could make the plot invisible the Jupyter Lab or Jupyter Classic interface but will look great and expanded in the dashboard.

It's usually easy to add the call to property() once you are done with the Notebook or control this globally using a variable.

Plotly¶

Plotly requires no big changes thanks to the some extra code and styling included in Jupyter-flex. We can make things look a bit better by changing the margin of the plot.

For example a simple dashboard that uses plotly.express:

In [5]:

import plotly.express as px
import plotly.graph_objects as go

import plotly.express as px import plotly.graph_objects as go

In [6]:

margin = go.layout.Margin(l=20, r=20, b=20, t=30)

margin = go.layout.Margin(l=20, r=20, b=20, t=30)

In [7]:

df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length")

fig.update_layout(margin=margin)
None

df = px.data.iris() fig = px.scatter(df, x="sepal_width", y="sepal_length") fig.update_layout(margin=margin) None

Click on the image to open the dashboard

Bokeh¶

Using Bokeh plots in Jupyter-flex dashboard requires two things:

1. One meta tag in the cell that does output_notebook() to embed the bokeh JS code in the notebook. The meta tag will add that cell to the dashboard .html with the display: none; style
2. Add sizing_mode="stretch_both" to the Bokeh figure() call

For example:

In [8]:

meta

import numpy as np

from bokeh.plotting import figure, show, output_notebook
output_notebook()

import numpy as np from bokeh.plotting import figure, show, output_notebook output_notebook()

Loading BokehJS ...

In [9]:

x = np.linspace(0, 4 * np.pi, 100)
y = np.sin(x)

x = np.linspace(0, 4 * np.pi, 100) y = np.sin(x)

In [10]:

fig = figure(sizing_mode="stretch_both")
fig.line(x, y)

# show(fig)

fig = figure(sizing_mode="stretch_both") fig.line(x, y) # show(fig)

Out[10]:

GlyphRenderer(

id = 'p1054', …)

coordinates = None,

data_source = ColumnDataSource(id='p1048', ...),

glyph = Line(id='p1051', ...),

group = None,

hover_glyph = None,

js_event_callbacks = {},

js_property_callbacks = {},

level = 'glyph',

muted = False,

muted_glyph = Line(id='p1053', ...),

name = None,

nonselection_glyph = Line(id='p1052', ...),

propagate_hover = False,

selection_glyph = 'auto',

subscribed_events = PropertyValueSet(),

syncable = True,

tags = [],

view = CDSView(id='p1055', ...),

visible = True,

x_range_name = 'default',

y_range_name = 'default')

Similar to what happens in Altair we see that the plot might not look its best well in the Jupyter Notebook interface (or these docs) but renders great in the dashboard.

It's usually easy to add the sizing_mode="stretch_both" code once you are done with the Notebook or control this globally using a variable.

Click on the image to open the dashboard

bqplot¶

bqplot is a plotting library that is 100% based on Jupyter widgets and therefore works great with them, it also required no major changes for the plots to look great on Jupyter-flex dashboards.

Once simple example:

In [11]:

import numpy as np
from bqplot import *

import numpy as np from bqplot import *

In [12]:

size = 100
np.random.seed(42)

x_data = range(size)
y_data = np.random.randn(size)
y_data_2 = np.random.randn(size)
y_data_3 = np.cumsum(np.random.randn(size) * 100.)

size = 100 np.random.seed(42) x_data = range(size) y_data = np.random.randn(size) y_data_2 = np.random.randn(size) y_data_3 = np.cumsum(np.random.randn(size) * 100.)

In [13]:

body

x_ord = OrdinalScale()
y_sc = LinearScale()

bar = Bars(x=np.arange(10), y=np.random.rand(10), scales={'x': x_ord, 'y': y_sc})
ax_x = Axis(scale=x_ord)
ax_y = Axis(scale=y_sc, tick_format='0.2f', orientation='vertical')

Figure(marks=[bar], axes=[ax_x, ax_y], padding_x=0.025, padding_y=0.025)

x_ord = OrdinalScale() y_sc = LinearScale() bar = Bars(x=np.arange(10), y=np.random.rand(10), scales={'x': x_ord, 'y': y_sc}) ax_x = Axis(scale=x_ord) ax_y = Axis(scale=y_sc, tick_format='0.2f', orientation='vertical') Figure(marks=[bar], axes=[ax_x, ax_y], padding_x=0.025, padding_y=0.025)

Out[13]:

Click on the image to open the dashboard

Updating plots¶

When using Voila and IPython widgets to dynamically update the content of plots in the dashboard there are some things to consider:

1. If the library has native support for IPython Widgets then it's a good idea to use that functionality, this is possible in:
   1. bqplot because the library is designed that way
   2. plotly using Figure Widget
2. If the library doesn't have native support for Jupyter widgets it's still possible to use it and update the dashboard the using Output Widgets

When using Output Widgets remember to call clear() before displaying new content, for example:

out = widgets.Output()

with out:
    out.clear_output()
    display(...)

It's common to have the with out: ... code inside a callback function from a widgets observe() method.

Examples¶

More examples that show the plotting libraries in action and other examples that show how to have more dyamic dashboards with Jupyter widgets:

card-complete

altair-single

altair

altair-scroll

bokeh-single

bokeh

bqplot-single (runs in mybinder.org)

bqplot (runs in mybinder.org)

plotly-single

plotly

Iris clustering (runs in mybinder.org)

Movie Explorer (runs in mybinder.org)

Wealth of Nations (runs in mybinder.org)