Jupyter-flex allows you to create interactive dashboards based on Jupyter Notebooks based on two simple concepts:
Let's take a very simple Jupyter Notebook with 3 cells and one plot and convert it to a dashboard.
import plotly.express as px
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length")
fig.show()
All you need to do to convert this to a dashboard is to add tag with the value body
to the that outs the plot.
How to view and add tags to cells in Jupyter Notebook
fig = px.scatter(df, x="sepal_width", y="sepal_length")
fig.show()
From here there is a couple of options to convert the notebook to a html dashboard.
File > Download as > Flex Dashboard (.html)
:
2. You can go in a terminal and run nbconvert
:
Terminal
$ jupyter nbconvert --to flex notebook.ipynb
Optionally add the --execute
flag to execute the notebook before converting it so the outputs are shown in the dashboard.
Terminal
$ jupyter nbconvert --to flex notebook.ipynb --execute
Open the resulting .html
file in a browser and the result will be:
You might notice that the default title of the dashboard is the name of the notebook file, you can customize these using parameters.
This is a very simple example, now let's look at the card concept of Jupyter-flex.
A Card is an object that holds one or more components of the dashboard such as markdown or any output generated from the execution of a Cell such as plots, text and widgets.
To learn more about cards and its options go to Layout > Cards.
You define a new Card by adding a level-3 markdown header (###
).
Any output from a tagged Cell will be added to the current Card until a new Card, Section or Page is defined.
Going back to the notebook example we can add a new plot to the by adding two new cells:
###
)body
tag### Second plot
fig = px.scatter(df, x="petal_width", y="petal_length")
fig.show()
To add another column to the dashboard define a new Section using a level 2 markdown header (##
)
In this case, the value of the header is irrelevant (since the default theme doesn't show it), it acts as an indicator to create a new Section.
## Column
fig = px.scatter(df, x="sepal_length", y="petal_length")
fig.show()
You can control the parameters of the dashboard such as title and orientation to be based of rows instead on columns
by tagging a code cell with parameters
.
Let's change the orientation of the plot to rows
and add a title of A Flex dashboard
.
flex_title = "A flex dashboard"
flex_orientation = "rows"
Well done! You have created you first Flex dashboard.
The Layouts page goes in depth about all the options to control the content of Jupyter-flex dashboards.
The Plotting page goes through some considerations around different plotting libraries in Jupyter-flex dashboards.
The Voila and IPywidgets page describes how to leverage Voila to create dashboards that use a live Jupyter kernel that enable viewers to change underlying parameters and see the results immediately using ipywidgets.