Hello all,
Is it possible to define csv file used in crossfilter example to consider multiple columns of indicators instead of single column
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
from plotly.offline import download_plotlyjs, plot
app = dash.Dash()
df = pd.read_csv(
‘http://127.0.0.1:8000/Traffic.csv’)
available_indicators = df[‘Indicator Name’].unique()
app.layout = html.Div([
html.Div([
html.Div([
dcc.Dropdown(
id='crossfilter-xaxis-column',
options=[{'label': i, 'value': i} for i in available_indicators],
value='Voice_Drops',
),
dcc.RadioItems(
id='crossfilter-xaxis-type',
options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={'display': 'inline-block'}
)
],
style={'width': '49%', 'display': 'inline-block'}),
html.Div([
dcc.Dropdown(
id='crossfilter-yaxis-column',
options=[{'label': i, 'value': i} for i in available_indicators],
value='PS_Drops'
),
dcc.RadioItems(
id='crossfilter-yaxis-type',
options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={'display': 'inline-block'}
)
], style={'width': '49%', 'float': 'right', 'display': 'inline-block'})
], style={
'borderBottom': 'thin lightgrey solid',
'backgroundColor': 'rgb(250, 250, 250)',
'padding': '10px 5px'
}),
html.Div([
dcc.Graph(
id='crossfilter-indicator-scatter',
hoverData={'points': [{'customdata': 'UAJH3441'}]}
)
], style={'width': '49%', 'display': 'inline-block', 'padding': '0 20'}),
html.Div([
dcc.Graph(id='x-time-series'),
dcc.Graph(id='y-time-series'),
], style={'display': 'inline-block', 'width': '49%'}),
html.Div(dcc.Slider(
id='crossfilter-Date--slider',
min=df['Date'].min(),
max=df['Date'].max(),
value=df['Date'].max(),
step=None,
marks={str(Date): str(Date) for Date in df['Date'].unique()}
), style={'width': '49%', 'padding': '0px 20px 20px 20px'})
])
@app.callback(
dash.dependencies.Output(‘crossfilter-indicator-scatter’, ‘figure’),
[dash.dependencies.Input(‘crossfilter-xaxis-column’, ‘value’),
dash.dependencies.Input(‘crossfilter-yaxis-column’, ‘value’),
dash.dependencies.Input(‘crossfilter-xaxis-type’, ‘value’),
dash.dependencies.Input(‘crossfilter-yaxis-type’, ‘value’),
dash.dependencies.Input(‘crossfilter-Date–slider’, ‘value’)])
def update_graph(xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
Date_value):
dff = df[df[‘Date’] == Date_value]
return {
'data': [go.Scatter(
x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
text=dff[dff['Indicator Name'] == yaxis_column_name]['Site Name'],
customdata=dff[dff['Indicator Name'] == yaxis_column_name]['Site Name'],
mode='markers',
marker={
'size': 15,
'opacity': 0.5,
'line': {'width': 0.5, 'color': 'white'}
}
)],
'layout': go.Layout(
xaxis={
'title': xaxis_column_name,
'type': 'linear' if xaxis_type == 'Linear' else 'log'
},
yaxis={
'title': yaxis_column_name,
'type': 'linear' if yaxis_type == 'Linear' else 'log'
},
margin={'l': 40, 'b': 30, 't': 10, 'r': 0},
height=350,
hovermode='closest'
)
}
def create_time_series(dff, axis_type, title):
return {
‘data’: [go.Scatter(
x=dff[‘Date’],
y=dff[‘Value’],
mode=‘lines+markers’
)],
‘layout’: {
‘height’: 225,
‘margin’: {‘l’: 20, ‘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’ if axis_type == ‘Linear’ else ‘log’},
‘xaxis’: {‘showgrid’: False}
}
}
@app.callback(
dash.dependencies.Output(‘x-time-series’, ‘figure’),
[dash.dependencies.Input(‘crossfilter-indicator-scatter’, ‘hoverData’),
dash.dependencies.Input(‘crossfilter-xaxis-column’, ‘value’),
dash.dependencies.Input(‘crossfilter-xaxis-type’, ‘value’)])
def update_y_timeseries(hoverData, xaxis_column_name, axis_type):
country_name = hoverData[‘points’][0][‘customdata’]
dff = df[df[‘Site Name’] == country_name]
dff = dff[dff[‘Indicator Name’] == xaxis_column_name]
title = ‘{}
{}’.format(country_name, xaxis_column_name)
return create_time_series(dff, axis_type, title)
@app.callback(
dash.dependencies.Output(‘y-time-series’, ‘figure’),
[dash.dependencies.Input(‘crossfilter-indicator-scatter’, ‘hoverData’),
dash.dependencies.Input(‘crossfilter-yaxis-column’, ‘value’),
dash.dependencies.Input(‘crossfilter-yaxis-type’, ‘value’)])
def update_x_timeseries(hoverData, yaxis_column_name, axis_type):
dff = df[df[‘Site Name’] == hoverData[‘points’][0][‘customdata’]]
dff = dff[dff[‘Indicator Name’] == yaxis_column_name]
return create_time_series(dff, axis_type, yaxis_column_name)
app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
if name == ‘main’:
app.run_server(debug=True)