Jupyter-flex allows you to create interactive dashboards based on Jupyter Notebooks by adding tags to notebooks cells and controlling 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 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 any output components of the dashboard such as plots, text, widgets and more.
In the previous Notebook it holds the one plot. 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 components (plots or text) 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:
###
)chart
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, it's 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 on columns
by tagging a code cell to as parameters
.
It's usually a good idea to have this cell at the beginning 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"
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.