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.
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, this includes: Altair, plotly, Bokeh and bqplot.
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 heigh (e.g. 500px
x 500px
).
A responsive behaviour is usually not the default for most plotting libraries and but it's very easy to change this. The way to do this differs from library to library here are some tips to make this happen in the libraries that we test more.
Note that Jupyter-flex includes some CSS and JS code to make these popular plotting libraries behave better in a dashboard scenario.
import altair as alt
from vega_datasets import data
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']
)
plot
If we tag the previous cell with chart
then the size will be static and not responsive, to make it responsive we just add a bit of code:
plot.properties(
width='container',
height='container'
)
This makes it look not great... on the Jupyter Notebook interface but will look great and expanded in a Flex dashboard. It's usually easy to add the call to property()
once the Notebook is finished or control this globally using a simple variable for easy development.
import plotly.express as px
import plotly.graph_objects as go
margin = go.layout.Margin(l=20, r=20, b=20, t=30)
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length")
fig.update_layout(margin=margin)
fig
Showing Bokeh. plots in Jupyter-flex dashboard requires:
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
just after the <body>
tag and make it invisible using display: none;
sizing_mode="stretch_both"
to the Bokeh figure()
Lets look at this example Notebook:
x = np.linspace(0, 4 * np.pi, 100)
y = np.sin(x)
fig = figure()
fig.line(x, y)
show(fig)
fig = figure(sizing_mode="stretch_both")
fig.line(x, y)
show(fig)
Similar to what happens in Altair we see that the plot doesn't render well in the Notebook Interface but renders beautifully in the final flex dashboard. It's quite easy to add the sizing_mode="stretch_both"
code once the Notebook is finished or control this globally using a simple variable for easy development.
import numpy as np
from bqplot import *
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.)
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)
When using Voila and IPython widgets to dynamically update the content of the dashboard there are some things to consider:
When using Output Widgets remember to clear()
the contents before displaying new content, for example:
out = widgets.Output()
with out:
out.clear_output()
display(...)
You usually have the with out: ...
code inside a callback function from a widgets observe()
method.
More examples that show the plotting libraries in action and other examples that show how to have more dyamic dashboards with ipywidgets: