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

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']
)

In [3]:

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'
)
None

This could make the plot look very small 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 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

In [6]:

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)
fig