This repository has been archived by the owner on Jun 4, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 300
/
crossfilter-hover-line.py
108 lines (93 loc) · 3.3 KB
/
crossfilter-hover-line.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
app = dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/dZVMbK.css'})
df = pd.read_csv(
'https://raw.githubusercontent.com/plotly/'
'datasets/master/gapminderDataFiveYear.csv')
y_data = 'lifeExp'
x_data = 'gdpPercap'
app.layout = html.Div(className="row", children=[
html.Div([
dcc.Graph(
id='crossfilter-indicator-scatter',
figure={
'data': [{
'x': df[df['year'] == 2007][x_data],
'y': df[df['year'] == 2007][y_data],
'customdata': df[df['year'] == 2007]['country'],
'mode': 'markers',
'marker': {
'size': 12,
'color': 'rgba(0, 116, 217, 0.5)',
'line': {
'color': 'rgb(0, 116, 217)',
'width': 0.5
}
}
}],
'layout': {
'xaxis': {
'title': x_data,
},
'yaxis': {
'title': y_data,
},
'margin': {
'l': 50,
'r': 10,
't': 10,
'b': 50
},
'hovermode': 'closest'
}
},
hoverData={'points': [{'customdata': 'Japan'}]}
)
], className="six columns"),
html.Div([
dcc.Graph(id='x-time-series'),
dcc.Graph(id='y-time-series'),
], className="six columns")
])
def create_time_series(dff, column, title):
return {
'data': [go.Scatter(
x=dff['year'],
y=dff[column],
mode='lines+markers',
)],
'layout': {
'height': 225,
'margin': {'l': 50, 'b': 30, 'r': 10, 't': 10},
'annotations': [{
'x': 0, 'y': 0.85, 'xanchor': 'left', 'yanchor': 'bottom',
'xref': 'paper', 'yref': 'paper', 'showarrow': False,
'align': 'left', 'bgcolor': 'rgba(255, 255, 255, 0.5)',
'text': title
}],
'yaxis': {'type': 'linear', 'title': column},
'xaxis': {'showgrid': False}
}
}
@app.callback(
dash.dependencies.Output('x-time-series', 'figure'),
[dash.dependencies.Input('crossfilter-indicator-scatter', 'hoverData')])
def update_y_timeseries(hoverData):
country_name = hoverData['points'][0]['customdata']
dff = df[df['country'] == country_name]
title = '<b>{}</b>'.format(country_name)
return create_time_series(dff, y_data, title)
@app.callback(
dash.dependencies.Output('y-time-series', 'figure'),
[dash.dependencies.Input('crossfilter-indicator-scatter', 'hoverData')])
def update_x_timeseries(hoverData):
country_name = hoverData['points'][0]['customdata']
dff = df[df['country'] == country_name]
title = '<b>{}</b>'.format(country_name)
return create_time_series(dff, x_data, title)
if __name__ == '__main__':
app.run_server(debug=True, port=8070)