Jupyter-flex allows you to create interactive dashboards based on Jupyter Notebooks by adding tags to notebooks cells and controling the layout of the dashboard using markdown headers.
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 chart
to the cell with 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
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 this using parameters.
This is a very simple example, now let's look at the card concept of Jupyter-flex.
A card is the object that holds any output components of the dashboard such as plots, text, widgets and more. The basic components of a card are:
###
).chart
. In general its a good idea to just have one plot with some text per cardtext
that contain some narrative for the dashboard.footer
For example this notebook:
import plotly.express as px
df = px.data.iris()
### Iris dataset
# One plot
fig = px.scatter(df, x="sepal_width", y="sepal_length")
fig.show()
# Another plot
fig = px.scatter(df, x="petal_width", y="petal_length")
fig.show()
# These are two plots the iris datasets
You define a new card by adding a level-3 markdown header (###
).
Any output components (plots, text, footer) before a new card this will be part of the previous card.
Going back to the notebook in the first section we can add a new plot to the by adding two new cells:
###
) markdown headerchart
tag### Second plot
fig = px.scatter(df, x="petal_width", y="petal_length")
fig.show()
To add another column to the dashboard use a level 2 markdown header (##
).
In this case the value of the header is irrelevant its just 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 of columns
by tagging a code cell to as parameters
.
It's usually a good idea to have this cell at the begining of the notebook.
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"
The Layout page goes in depth about all the options to control the content of the dashboards in Jupyter-flex.
The Voila 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.