Skip to content
This repository was archived by the owner on Jun 4, 2024. It is now read-only.

Commit c125ab8

Browse files
chriddypchriddyp
committed
more examples
1 parent 10e4814 commit c125ab8

File tree

130 files changed

+5022
-191
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

130 files changed

+5022
-191
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
vv
22
*.pyc
3+
cache/
4+
.ropeproject

‎README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
This repo contains all of the Dash examples that I have created while helping out the Dash community on https://community.plot.ly/c/dash.
2+
3+
These examples are unordered and unorganized and they might not be helpful (yet) without the context that the Dash community forum provided while creating them.
4+
5+
Perhaps in the future these examples will be organized into something greater. For now, if you're looking for examples, try:
6+
- Searching through the [Dash Community Forum](https://community.plot.ly/c/dash)
7+
- Reading the [Official Dash Userguide](https://plot.ly/dash) (GitHub code: https://github.com/plotly/dash-docs)

‎app_layout_function.py

+26-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,37 @@
11
import dash
2+
from dash.dependencies import Input, Output
23
import dash_html_components as html
4+
import dash_core_components as dcc
35

46
app = dash.Dash()
57

8+
print('App start')
9+
10+
611
def serve_layout():
7-
print('serve layout')
8-
return html.Div('hlo world')
12+
print('Calling layout')
13+
return html.Div([
14+
html.Div(id='output-1'),
15+
html.Div(id='output-2'),
16+
dcc.Dropdown(
17+
id='input',
18+
options=[{'label': i, 'value': i} for i in ['a', 'b']]
19+
)
20+
])
21+
922

1023
app.layout = serve_layout
11-
app.server.secret_key='secret'
24+
25+
26+
@app.callback(Output('output-1', 'children'), [Input('input', 'value')])
27+
def update_outout(value):
28+
return 'You have selected {}'.format(value)
29+
30+
31+
@app.callback(Output('output-2', 'children'), [Input('input', 'value')])
32+
def update_outout(value):
33+
return 'You have selected {}'.format(value)
34+
1235

1336
if __name__ == '__main__':
1437
app.run_server(debug=False)

‎basic-interval.py

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import dash
2+
from dash.dependencies import Input, Output
3+
import dash_core_components as dcc
4+
import dash_html_components as html
5+
import datetime
6+
7+
app = dash.Dash()
8+
9+
app.layout = html.Div([
10+
html.Div(id='my-output-interval'),
11+
dcc.Interval(id='my-interval', interval=5),
12+
])
13+
14+
15+
@app.callback(
16+
Output('my-output-interval', 'children'),
17+
[Input('my-interval', 'n_intervals')])
18+
def display_output(n):
19+
now = datetime.datetime.now()
20+
return '{} intervals have passed. It is {}:{}:{}'.format(
21+
n,
22+
now.hour,
23+
now.minute,
24+
now.second
25+
)
26+
27+
28+
if __name__ == '__main__':
29+
app.run_server(debug=True)

‎branched_lineages.py

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import dash
2+
from dash.dependencies import Input, Output
3+
import dash_core_components as dcc
4+
import dash_html_components as html
5+
import time
6+
7+
app = dash.Dash(__name__)
8+
server = app.server
9+
app.layout = html.Div([
10+
dcc.Input(id='grandparent', value='input 1'),
11+
dcc.Input(id='parent-a'),
12+
dcc.Input(id='parent-b'),
13+
dcc.Input(id='parent-c'),
14+
html.Div(id='child-a'),
15+
html.Div(id='child-b')
16+
])
17+
18+
app.scripts.config.serve_locally = True
19+
20+
21+
@app.callback(Output('parent-a', 'value'),
22+
[Input('grandparent', 'value')])
23+
def update_parenta(value):
24+
print('parenta')
25+
time.sleep(2)
26+
return 'a: {}'.format(value)
27+
28+
29+
@app.callback(Output('parent-b', 'value'),
30+
[Input('grandparent', 'value')])
31+
def update_parentb(value):
32+
print('parentb')
33+
time.sleep(6)
34+
return 'b: {}'.format(value)
35+
36+
37+
@app.callback(Output('parent-c', 'value'),
38+
[Input('grandparent', 'value')])
39+
def update_parentb(value):
40+
print('parentc')
41+
time.sleep(9)
42+
return 'c: {}'.format(value)
43+
44+
45+
@app.callback(Output('child-a', 'children'),
46+
[Input('parent-a', 'value'),
47+
Input('parent-b', 'value'),
48+
Input('parent-c', 'value')])
49+
def update_childa(parenta_value, parentb_value, parentc_value):
50+
print('childa: {}, {}, {}'.format(parenta_value, parentb_value, parentc_value))
51+
raise Exception
52+
return 'childa: {} + {} + {}'.format(parenta_value, parentb_value, parentc_value)
53+
54+
55+
@app.callback(Output('child-b', 'children'),
56+
[Input('parent-a', 'value'),
57+
Input('parent-b', 'value'),
58+
Input('grandparent', 'value')])
59+
def update_childb(parenta_value, parentb_value, grandparent_value):
60+
print('childb: {}, {}, {}'.format(
61+
parenta_value,
62+
parentb_value,
63+
grandparent_value
64+
))
65+
return 'childb: {} + {} + {}'.format(
66+
parenta_value,
67+
parentb_value,
68+
grandparent_value
69+
)
70+
71+
72+
if __name__ == '__main__':
73+
app.run_server(debug=True, processes=8)

‎chinese-characters.gif

59.5 KB
Loading

‎chinese-characters.py

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# -*- coding: utf-8 -*-
2+
3+
import dash
4+
import dash_html_components as html
5+
import dash_core_components as dcc
6+
7+
print(dcc.__version__)
8+
9+
app = dash.Dash()
10+
11+
app.layout = html.Div([
12+
dcc.Dropdown(
13+
options=[
14+
{'label': 'Montréal', 'value': 'Montréal'},
15+
{'label': 'Tokyo', 'value': 'Tokyo'},
16+
{'label': '北京', 'value': '北京'},
17+
]
18+
)
19+
])
20+
21+
22+
if __name__ == '__main__':
23+
app.run_server(debug=True)

‎click-selection-points.gif

169 KB
Loading

‎core_components_callback_error.py

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import dash
2+
from dash.dependencies import Input, Output
3+
import dash_html_components as html
4+
import dash_core_components as dcc
5+
import datetime
6+
7+
print(dcc.__version__)
8+
9+
def serve_layout():
10+
return html.Div([
11+
html.Div(id='state-container', style={'display': 'none'}),
12+
html.Div(id='output'),
13+
dcc.Dropdown(id='dropdown', options=[{'label': i, 'value': i} for i in ['A', 'B']])
14+
])
15+
16+
app = dash.Dash()
17+
18+
app.layout = serve_layout
19+
20+
app.config.supress_callback_exceptions = True
21+
22+
@app.callback(
23+
Output('state-container', 'children'),
24+
[Input('dropdown', 'value')])
25+
def update_state(value):
26+
return 'You have selected "{}"'.format(value)
27+
28+
29+
@app.callback(
30+
Output('output', 'children'),
31+
[Input('state-container', 'children')])
32+
def update_output(value):
33+
return value
34+
35+
36+
if __name__ == '__main__':
37+
app.run_server()

‎cross-filter.gif

206 KB
Loading

‎crossfilter-hover-line.py

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import dash
2+
import dash_core_components as dcc
3+
import dash_html_components as html
4+
import plotly.graph_objs as go
5+
import pandas as pd
6+
7+
app = dash.Dash()
8+
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/dZVMbK.css'})
9+
10+
df = pd.read_csv(
11+
'https://raw.githubusercontent.com/plotly/'
12+
'datasets/master/gapminderDataFiveYear.csv')
13+
14+
y_data = 'lifeExp'
15+
x_data = 'gdpPercap'
16+
17+
app.layout = html.Div(className="row", children=[
18+
19+
html.Div([
20+
dcc.Graph(
21+
id='crossfilter-indicator-scatter',
22+
figure={
23+
'data': [{
24+
'x': df[df['year'] == 2007][x_data],
25+
'y': df[df['year'] == 2007][y_data],
26+
'customdata': df[df['year'] == 2007]['country'],
27+
'mode': 'markers',
28+
'marker': {
29+
'size': 12,
30+
'color': 'rgba(0, 116, 217, 0.5)',
31+
'line': {
32+
'color': 'rgb(0, 116, 217)',
33+
'width': 0.5
34+
}
35+
}
36+
}],
37+
'layout': {
38+
'xaxis': {
39+
'title': x_data,
40+
},
41+
'yaxis': {
42+
'title': y_data,
43+
},
44+
'margin': {
45+
'l': 50,
46+
'r': 10,
47+
't': 10,
48+
'b': 50
49+
},
50+
'hovermode': 'closest'
51+
}
52+
},
53+
hoverData={'points': [{'customdata': 'Japan'}]}
54+
)
55+
], className="six columns"),
56+
57+
html.Div([
58+
dcc.Graph(id='x-time-series'),
59+
dcc.Graph(id='y-time-series'),
60+
], className="six columns")
61+
62+
])
63+
64+
65+
def create_time_series(dff, column, title):
66+
return {
67+
'data': [go.Scatter(
68+
x=dff['year'],
69+
y=dff[column],
70+
mode='lines+markers',
71+
)],
72+
'layout': {
73+
'height': 225,
74+
'margin': {'l': 50, 'b': 30, 'r': 10, 't': 10},
75+
'annotations': [{
76+
'x': 0, 'y': 0.85, 'xanchor': 'left', 'yanchor': 'bottom',
77+
'xref': 'paper', 'yref': 'paper', 'showarrow': False,
78+
'align': 'left', 'bgcolor': 'rgba(255, 255, 255, 0.5)',
79+
'text': title
80+
}],
81+
'yaxis': {'type': 'linear', 'title': column},
82+
'xaxis': {'showgrid': False}
83+
}
84+
}
85+
86+
87+
@app.callback(
88+
dash.dependencies.Output('x-time-series', 'figure'),
89+
[dash.dependencies.Input('crossfilter-indicator-scatter', 'hoverData')])
90+
def update_y_timeseries(hoverData):
91+
country_name = hoverData['points'][0]['customdata']
92+
dff = df[df['country'] == country_name]
93+
title = '<b>{}</b>'.format(country_name)
94+
return create_time_series(dff, y_data, title)
95+
96+
97+
@app.callback(
98+
dash.dependencies.Output('y-time-series', 'figure'),
99+
[dash.dependencies.Input('crossfilter-indicator-scatter', 'hoverData')])
100+
def update_x_timeseries(hoverData):
101+
country_name = hoverData['points'][0]['customdata']
102+
dff = df[df['country'] == country_name]
103+
title = '<b>{}</b>'.format(country_name)
104+
return create_time_series(dff, x_data, title)
105+
106+
107+
if __name__ == '__main__':
108+
app.run_server(debug=True, port=8070)

‎dash-annotations.py

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import dash
2+
import dash_core_components as dcc
3+
import dash_html_components as html
4+
5+
app = dash.Dash()
6+
7+
GDP = {'name': 'GDP_yoy',
8+
'x': [2012, 2013, 2014, 2015, 2016],
9+
'y': [103.5, 101.3, 100.7, 97.2, 99.8]}
10+
11+
12+
def make_annotation_item(x, y):
13+
return dict(xref='x', yref='y',
14+
x=x, y=y,
15+
font=dict(color='black'),
16+
xanchor='left',
17+
yanchor='middle',
18+
text='Annotation: {} '.format(y),
19+
showarrow=False)
20+
21+
ANNOTATIONS = [make_annotation_item(x=GDP['x'][-1], y=GDP['y'][-1])]
22+
23+
app.layout = html.Div(children=[
24+
dcc.Graph(
25+
id='example-graph',
26+
figure={
27+
'data': [GDP],
28+
'layout': {
29+
'xaxis': dict(range=[2010, 2020]),
30+
'annotations': ANNOTATIONS
31+
}
32+
}
33+
)
34+
])
35+
36+
if __name__ == '__main__':
37+
app.run_server(debug=True)

‎dash-append-element-dropdown-options.gif

105 KB
Loading

‎dash-append-element-dropdown-options.py

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import dash
2+
from dash.dependencies import Input, Output, State
3+
import dash_core_components as dcc
4+
import dash_html_components as html
5+
6+
app = dash.Dash()
7+
app.layout = html.Div([
8+
dcc.Dropdown(
9+
id='dropdown',
10+
options=[],
11+
value=None
12+
),
13+
html.Button('Add Option', id='button', n_clicks=0)
14+
])
15+
16+
17+
@app.callback(
18+
Output('dropdown', 'options'),
19+
[Input('button', 'n_clicks')],
20+
[State('dropdown', 'options')])
21+
def update_options(n_clicks, existing_options):
22+
option_name = 'Option {}'.format(n_clicks)
23+
existing_options.append({'label': option_name, 'value': option_name})
24+
return existing_options
25+
26+
27+
if __name__ == '__main__':
28+
app.run_server(debug=True)

0 commit comments

Comments
 (0)