more examples

Author: chriddyp

dash-animage-range.gif

@@ -0,0 +1,69 @@
+import dash
+import dash_core_components as dcc
+import dash_html_components as html
+
+import numpy as np
+
+app = dash.Dash()
+
+value_range = [-5, 5]
+
+app.layout = html.Div([
+    html.Div([
+        html.Div(dcc.Graph(animate=True, id='graph-1'), className="six columns"),
+        html.Div(dcc.Graph(animate=True, id='graph-2'), className="six columns")
+    ], className="row"),
+    dcc.RangeSlider(
+        id='slider',
+        min=value_range[0],
+        max=value_range[1],
+        step=1,
+        value=[-2, 2],
+        marks={i: i for i in range(value_range[0], value_range[1]+1)}
+    )
+], className="container")
+
+trace = {
+    'mode': 'markers',
+    'marker': {
+        'size': 12,
+        'opacity': 0.5,
+        'line': {
+            'width': 0.5,
+            'color': 'white'
+        }
+    }
+}
+
+@app.callback(
+    dash.dependencies.Output('graph-1', 'figure'),
+    [dash.dependencies.Input('slider', 'value')])
+def update_graph_1(value):
+    x = np.random.rand(50) * (value[1] - value[0]) + value[0]
+    y = np.random.rand(50) * (value[1] - value[0]) + value[0]
+    return {
+        'data': [dict({'x': x, 'y': y}, **trace)],
+        'layout': {
+            'xaxis': {'range': [np.min(x), np.max(x)]},
+            'yaxis': {'range': [np.min(y), np.max(y)]}
+        }
+    }
+
+@app.callback(
+    dash.dependencies.Output('graph-2', 'figure'),
+    [dash.dependencies.Input('slider', 'value')])
+def update_graph_1(value):
+    x = np.random.rand(50) * (value[1] - value[0]) + value[0]
+    y = np.random.rand(50) * (value[1] - value[0]) + value[0]
+    return {
+        'data': [dict({'x': x, 'y': y}, **trace)],
+        'layout': {
+            'xaxis': {'range': value_range},
+            'yaxis': {'range': value_range}
+        }
+    }
+
+app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

dash-animate-range.py

@@ -0,0 +1,65 @@
+import dash
+from dash.dependencies import Input, Output, Event
+import dash_core_components as dcc
+import dash_html_components as html
+
+import datetime
+import time
+
+class Semaphore:
+    def __init__(self, filename='semaphore.txt'):
+        self.filename = filename
+        with open(self.filename, 'w') as f:
+            f.write('done')
+
+    def lock(self):
+        with open(self.filename, 'w') as f:
+            f.write('working')
+
+    def unlock(self):
+        with open(self.filename, 'w') as f:
+            f.write('done')
+
+    def is_locked(self):
+        return open(self.filename, 'r').read() == 'working'
+
+semaphore = Semaphore()
+
+def long_process():
+    if semaphore.is_locked():
+        raise Exception('Resource is locked')
+    semaphore.lock()
+    time.sleep(7)
+    semaphore.unlock()
+    return datetime.datetime.now()
+
+app = dash.Dash()
+
+def layout():
+    return html.Div([
+        html.Button('Run Process', id='button'),
+        dcc.Interval(id='interval', interval=500),
+        dcc.RadioItems(
+            id='lock',
+            options=[{'label': i, 'value': i} for i in ['Running...', 'Free']]),
+        html.Div(id='output')
+    ])
+
+app.layout = layout
+
+@app.callback(
+    Output('lock', 'value'),
+    events=[Event('interval', 'interval')])
+def display_status():
+    return 'Running...' if semaphore.is_locked() else 'Free'
+
+@app.callback(
+    Output('output', 'children'),
+    events=[Event('button', 'click')])
+def run_process():
+    return 'Finished at {}'.format(long_process())
+
+app.scripts.config.serve_locally = True
+
+if __name__ == '__main__':
+    app.run_server(debug=True, processes=5)

dash-asynchronous.gif

@@ -0,0 +1,27 @@
+import dash
+from dash.dependencies import Input, Output
+import dash_core_components as dcc
+import dash_html_components as html
+
+import flask
+
+app = dash.Dash()
+app.layout = html.Div([
+    dcc.Dropdown(
+        id='d',
+        options=[{'label': i, 'value': i} for i in ['a', 'b', 'c']],
+        value='a'
+    ),
+    html.Div(id='output')
+])
+
+
+@app.callback(
+    Output('output', 'children'),
+    [Input('d', 'value')])
+def update_outout(value):
+    print(flask.request.cookies)
+    return value
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

dash-asynchronous.py

@@ -0,0 +1,32 @@
+import dash
+from dash.dependencies import Event, Input, Output
+import dash_core_components as dcc
+import dash_html_components as html
+
+app = dash.Dash()
+
+# Edit this object!
+layout = html.Div([
+    html.H1('Hello Dash!'),
+    html.H3('Dash with live-reload'),
+])
+
+# Barebones layout
+app.layout = html.Div([
+    dcc.Interval(id='refresh', interval=200),
+    html.Div(id='content', className="container")
+])
+
+# Update the `content` div with the `layout` object.
+# When you save this file, `debug=True` will re-run
+# this script, serving the new layout
+@app.callback(
+    Output('content', 'children'),
+    events=[Event('refresh', 'interval')])
+def display_layout():
+    return layout
+
+app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

dash_requests.py

@@ -0,0 +1 @@
+done

live-reload.gif

@@ -0,0 +1,46 @@
+# pip install dash_core_components==0.5.3rc1
+
+import dash
+from dash.dependencies import Input, Output
+import dash_html_components as html
+import dash_core_components as dcc
+
+app = dash.Dash()
+
+app.layout = html.Div([
+    # This "header" will persist across pages
+    html.H2('Multi Page Dash App'),
+
+    # Each "page" will modify this element
+    html.Div(id='content-container'),
+
+    # This Location component represents the URL bar
+    dcc.Location(id='url', refresh=False)
+], className="container")
+
+@app.callback(
+    Output('content-container', 'children'),
+    [Input('url', 'pathname')])
+def display_page(pathname):
+    if pathname == '/':
+        return html.Div([
+            html.Div('You are on the index page.'),
+
+            # the dcc.Link component updates the `Location` pathname
+            # without refreshing the page
+            dcc.Link(html.A('Go to page 2 without refreshing!'), href="/page-2"),
+            html.Hr(),
+            html.A('Go to page 2 but refresh the page', href="/page-2")
+        ])
+    elif pathname == '/page-2':
+        return html.Div([
+            html.H4('Welcome to Page 2'),
+            dcc.Link(html.A('Go back home'), href="/"),
+        ])
+    else:
+        return html.Div('I guess this is like a 404 - no content available')
+
+app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
+
+if __name__ == '__main__':
+    app.run_server(debug=True)