Launch a Dash app in a Google Colab Notebook

Question

How to launch a Dash app (http://dash.plot.ly) from Google Colab (https://colab.research.google.com)?

Answer 1

JupyterDash (the official library for running Dash in notebooks) now has support for running apps on Colab.

You can paste this code inside a colab notebook, and your app will show up inline:

!pip install jupyter-dash

import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
# Load Data
df = px.data.tips()
# Build App
app = JupyterDash(__name__)
app.layout = html.Div([
    html.H1("JupyterDash Demo"),
    dcc.Graph(id='graph'),
    html.Label([
        "colorscale",
        dcc.Dropdown(
            id='colorscale-dropdown', clearable=False,
            value='plasma', options=[
                {'label': c, 'value': c}
                for c in px.colors.named_colorscales()
            ])
    ]),
])
# Define callback to update graph
@app.callback(
    Output('graph', 'figure'),
    [Input("colorscale-dropdown", "value")]
)
def update_figure(colorscale):
    return px.scatter(
        df, x="total_bill", y="tip", color="size",
        color_continuous_scale=colorscale,
        render_mode="webgl", title="Tips"
    )
# Run app and display result inline in the notebook
app.run_server(mode='inline')

Here's a GIF of what the output looks like. You can also check out this Colab notebook.

Here's some more useful links:

• v0.3.0 Release note
• JupyterDash Announcement
• Official Repository
• Demo apps using Hugging Face's transformers in Colab