Jupyter Dash

Dash Applications in nextjournal using Jupyter Dash library. More examples on Dash repository.

import os
from urllib.parse import urlparse
nj_runtime_url = urlparse(os.environ.get('NEXTJOURNAL_RUNTIME_SERVICE_URL'))
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__,
                  server_url = 'https://' + nj_runtime_url.hostname,
                  requests_pathname_prefix = nj_runtime_url.path + '/')
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',
               width=700,
               host='0.0.0.0',
               port=9998)
5.1s
Dash Example (Python)
Jupyter Dash

Environment

pip install jupyter-dash
15.1s
Jupyter Dash (Bash)
Runtimes (2)