20

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

Mac
  • 357
  • 1
  • 2
  • 6

5 Answers5

14

To my knowledge there is currently no straightforward way to do this.

Find below a workaround that is similar to setting up Tensorboard (https://www.dlology.com/blog/quick-guide-to-run-tensorboard-in-google-colab/).

Start with a code cell that sets up all things required for this workaround:

# How to run a Dash app in Google Colab

## Requirements

### Install ngrok
!wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
!unzip ngrok-stable-linux-amd64.zip

### Run ngrok to tunnel Dash app port 8050 to the outside world. 
### This command runs in the background.
get_ipython().system_raw('./ngrok http 8050 &')

### Get the public URL where you can access the Dash app. Copy this URL.
! curl -s http://localhost:4040/api/tunnels | python3 -c \
    "import sys, json; print(json.load(sys.stdin)['tunnels'][0]['public_url'])"

### Install Dash
!pip install dash==0.31.1  # The core dash backend
!pip install dash-html-components==0.13.2  # HTML components
!pip install dash-core-components==0.39.0  # Supercharged components
!pip install dash-table==3.1.7  # Interactive DataTable component (new!)

Add another code cell with your Dash app:

## Dash app (https://dash.plot.ly/getting-started)

### Save file with Dash app on the Google Colab machine
%%writefile my_app1.py
import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

In a last code cell you can then start your Dash app (this cell will be busy until you stop the exection and thus, stop your Dash app).

### Run Dash app
!python my_app1.py

To access the Dash app copy & paste the ngrok.io-URL above to a new brower tab (NOT 127.0.0.1:8050) and wait a few seconds.

majom
  • 7,863
  • 7
  • 55
  • 88
  • I am getting this error : This is a development server. Do not use it in a production deployment – Michael Joyner Aug 03 '19 at 18:57
  • It's just a warning. Everything works. However, as the warning says this is rather something you should not consider for a "production environment". See: https://dev.to/flippedcoding/difference-between-development-stage-and-production-d0p – majom Aug 05 '19 at 14:22
  • It works for this example where you just build a small dictionary on the spot and use it as sample data. How would you go about passing a pandas dataframe to my_app1.py? – Eight Rice Mar 01 '20 at 14:28
  • you run your dash application as regular application in jupyter notebook and see result by refreshing the tunnel link. Kindly check example link below, which I had created: https://www.kaggle.com/piyushrumao/interactive-dash-visualizations-in-notebook – Piyush Rumao Apr 11 '20 at 21:51
12

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:

desertnaut
  • 57,590
  • 26
  • 140
  • 166
xhluca
  • 868
  • 5
  • 22
  • 3
    Thanks, this looks great. I run it and get a Google 403 error. Any idea what that means? Also, you might want to update your imports to this: `from dash import dcc from dash import html` as the imports you have for dcc and html are deprecated. – Azurespot Mar 10 '22 at 22:50
4

Thank you. Guys, if xhlulu's suggestion doesn't run as expected you can edit the last row like this:

app.run_server(mode='inline',host="0.0.0.0",port=1005)
vitaliis
  • 4,082
  • 5
  • 18
  • 40
bilallozdemir
  • 63
  • 6
  • For reference, to shutdown the dash app: `app._terminate_server_for_port(host="127.0.0.1", port="1005")` – Shadi Sep 20 '21 at 13:45
3

I created a video tutorial a while back showing how to share your Dash app within Google Colab. It's in the first 5 minutes.

Adam Schroeder
  • 748
  • 2
  • 9
  • 23
0
!pip install jupyter-dash==0.3.0
!pip install dash==2.0.0

It seems not every version of library works. This version of library works for me in colab with jupyter-dash.

luomein
  • 51
  • 1
  • 4