-
Notifications
You must be signed in to change notification settings - Fork 1
/
08_dash_06.py
77 lines (71 loc) · 2.26 KB
/
08_dash_06.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
from numpy import random
app = dash.Dash()
df = pd.read_csv('data/mpg.csv')
# Add a random "jitter" to model_year to spread out the plot
df['year'] = df['model_year'] + random.randint(-4,5,len(df))*0.10
app.layout = html.Div([
html.Div([ # this Div contains our scatter plot
dcc.Graph(
id='mpg_scatter',
figure={
'data': [go.Scatter(
x = df['year']+1900, # our "jittered" data
y = df['mpg'],
text = df['name'],
hoverinfo = 'text',
mode = 'markers'
)],
'layout': go.Layout(
title = 'mpg.csv dataset',
xaxis = {'title': 'model year'},
yaxis = {'title': 'miles per gallon'},
hovermode='closest'
)
}
)], style={'width':'50%','display':'inline-block'}),
html.Div([ # this Div contains our output graph
dcc.Graph(
id='mpg_line',
figure={
'data': [go.Scatter(
x = [0,1],
y = [0,1],
mode = 'lines'
)],
'layout': go.Layout(
title = 'acceleration',
margin = {'l':0}
)
}
)
], style={'width':'20%', 'height':'50%','display':'inline-block'})
])
@app.callback(
Output('mpg_line', 'figure'),
[Input('mpg_scatter', 'hoverData')])
def callback_graph(hoverData):
v_index = hoverData['points'][0]['pointIndex']
fig = {
'data': [go.Scatter(
x = [0,1],
y = [0,60/df.iloc[v_index]['acceleration']],
mode='lines',
line={'width':2*df.iloc[v_index]['cylinders']}
)],
'layout': go.Layout(
title = df.iloc[v_index]['name'],
xaxis = {'visible':False},
yaxis = {'visible':False, 'range':[0,60/df['acceleration'].min()]},
margin = {'l':0},
height = 300
)
}
return fig
if __name__ == '__main__':
app.run_server()