How To Use Plotly/Plotly Express & Dash With JupyterLab

Plotly is an incredibly useful tool for creating visualizations. It accepts data from a Pandas Dataframe and creates interactive visualizations. Plotly also released Plotly Express which is a higher level wrapper for Plotly. What’s nice is one can start with Plotly Express and go down to Plotly if one need’s more powerful features.

$ python3 -m venv venv
$ source venv/bin/activate
$ python3 -m pip install jupyter jupyterlab plotly plotly-express
$ sudo apt update
$ sudo apt install nodejs npm -y
$ jupyter labextension install jupyterlab-plotly
$ jupyter lab build
$ jupyter lab .

Plotly/Plotly Express Offline Mode In A Jupyterlab Session

In order to use Plotly/Plotly Express with a Jupyter Lab session one must get Plotly configured in offline mode and have it display its plots inline. Here “offline” mode means Plotly will not upload one’s plots to Plotly’s Chart Studio service.

import plotly.offline as pyo
import plotly.express as px


# Set notebook mode to work in offline
pyo.init_notebook_mode()

Dash In A Jupyterlab session

import dash
from jupyter_dash import JupyterDash
import dash_html_components as html


app = JupyterDash(__name__)

app.layout = html.Div(children = [
    html.H1("The Drunken Sailor Problem"),
    html.H2("A simulated exploration, visualization and dashboard")
])

app.run_server(
    mode="jupyterlab",
    port= 8050,
    dev_tools_ui=True,
    debug=True,
    dev_tools_hot_reload =True,
    threaded=True
)

This will open a new tab in your Jupyterlab session and display your dashboard. You can rerun the cells to update the dashboard.

Conclusion

At this point you can use Plotly/Plotly Express and Dash inside a Jupyter notebook. Enjoy!