Jupyter-flex allows you to create interactive dashboards based on Jupyter Notebooks simply by adding tags to notebooks cells and control 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 is to add a new 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 there there is a couple of options to convert the notebook to a html dashboard.
2. You can also go into a terminal and run
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:
Output components are delineated using level 3 markdown headers (###).
To add a new plot to the current dashboard add two new cells
###
) markdown headerchart
tag### Second plot
fig = px.scatter(df, x="petal_width", y="petal_length")
fig.show()
Running the jupyter-nbconvert
command again will result in:
You will notice some details of Jupyter-flex:
chart
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
(this is the same tag used by papermill).
It's 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
.
title = "A flex dashboard"
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.