guide.md

Data-Viz Guide

Publishing a data-visualization app is a quick way to take something that is running in a notebook or script and make it available to your colleagues or the public-at-large.

You can publish Dash and Bokeh apps on C/S, and we plan to support even more viz libraries like Streamlit and RStudio.

Dash

Full source code for app available here.

1. Create your app.

We are going to use an example app from the Dash documentation. The only changes required are setting the url_base_pathname for the app and setting the server variable:

url_base_pathname = os.environ.get("URL_BASE_PATHNAME", "/")

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

# This will be called by gunicorn when serving the app on C/S.
server = app.server

C/S will set the URL_BASE_PATHNAME environment variable when it runs your app. Here's a full working Dash App that you can run locally with this command:

python app.py

And, here is the source code:

# app.py

# Adapted from the Dash docs: https://dash.plotly.com/basic-callbacks

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')

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

# Retrieve the variable or set the path to root if it is not there.
url_base_pathname = os.environ.get("URL_BASE_PATHNAME", "/")

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

# This will be called by gunicorn when serving the app on C/S.
server = app.server

app.layout = html.Div([
    dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        value=df['year'].min(),
        marks={str(year): str(year) for year in df['year'].unique()},
        step=None
    )
])


@app.callback(
    Output('graph-with-slider', 'figure'),
    [Input('year-slider', 'value')])
def update_figure(selected_year):
    filtered_df = df[df.year == selected_year]

    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp",
                     size="pop", color="continent", hover_name="country",
                     log_x=True, size_max=55)

    fig.update_layout(transition_duration=500)

    return fig


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

2. Set up your app's git repository.

Once you've set up a git repository, you can quickly publish an app on C/S. First, create a new file named app.py and add the above code to it. Next, create a requirements.txt file and add dash to it.

# requirements.txt
dash

C/S also supports more advanced enivronment specifications.

Now your app should look like this:

$ tree .
.
├── app.py
└── requirements.txt

3. Publish your app on C/S.

The Compute Studio publish page will walk you through the final steps for creating your app: https://compute.studio/new/

4. The C/S team will take over from here to get your app online as soon as possible!

Bokeh

Full source code for app available here.

1. Create your app.

We are going to use an example app from the Bokeh documentation.

Here's a full working Bokeh App that you can run locally with this command:

bokeh serve app.py

And, here is the source code:

# app.py

# Downloaded from: https://github.com/bokeh/bokeh/blob/branch-2.3/examples/app/sliders.py

import numpy as np

from bokeh.io import curdoc
from bokeh.layouts import column, row
from bokeh.models import ColumnDataSource, Slider, TextInput
from bokeh.plotting import figure

# Set up data
N = 200
x = np.linspace(0, 4*np.pi, N)
y = np.sin(x)
source = ColumnDataSource(data=dict(x=x, y=y))


# Set up plot
plot = figure(plot_height=400, plot_width=400, title="my sine wave",
              tools="crosshair,pan,reset,save,wheel_zoom",
              x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])

plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)


# Set up widgets
text = TextInput(title="title", value='my sine wave')
offset = Slider(title="offset", value=0.0, start=-5.0, end=5.0, step=0.1)
amplitude = Slider(title="amplitude", value=1.0, start=-5.0, end=5.0, step=0.1)
phase = Slider(title="phase", value=0.0, start=0.0, end=2*np.pi)
freq = Slider(title="frequency", value=1.0, start=0.1, end=5.1, step=0.1)


# Set up callbacks
def update_title(attrname, old, new):
    plot.title.text = text.value

text.on_change('value', update_title)

def update_data(attrname, old, new):

    # Get the current slider values
    a = amplitude.value
    b = offset.value
    w = phase.value
    k = freq.value

    # Generate the new curve
    x = np.linspace(0, 4*np.pi, N)
    y = a*np.sin(k*x + w) + b

    source.data = dict(x=x, y=y)

for w in [offset, amplitude, phase, freq]:
    w.on_change('value', update_data)


# Set up layouts and add to document
inputs = column(text, offset, amplitude, phase, freq)

curdoc().add_root(row(inputs, plot, width=800))
curdoc().title = "Sliders"

2. Set up your app's git repository.

Once you've set up a git repository, you can quickly publish an app on C/S. First, create a new file named app.py and add the above code to it. Next, create a requirements.txt file and add bokeh to it.

# requirements.txt
bokeh

C/S also supports more advanced enivronment specifications.

Now your app should look like this:

$ tree .
.
├── app.py
└── requirements.txt

3. Publish your app on C/S.

The Compute Studio publish page will walk you through the final steps for creating your app: https://compute.studio/new/

4. The C/S team will take over from here to get your app online as soon as possible!

Streamlit

Coming soon...