For some reason, after I added a second multi-select dropdown, the height of none of the three graphs show correctly no matter what I put into the layout.
I’ve uploaded the code to github here as “Sankey Debug” (https://github.com/andrewhong5297/dash_plotly), using the AirBnb 2019 NYC data also in that repo. Lines 14-76 are just a function to change dataframe into source,target,count, the dashboard starts on line 85.
Any input would be very appreciated!!! I’ve tried just about everything I can in changing the layout, divs, style, etc. Code is here (minus the getSankey function) if you don’t want to check the repo:
app.layout = html.Div([
html.Div([
html.Label('Select Path for Breakdown'),
dcc.Dropdown(
id='Multi-Select Dropdown Path',
options=[
{'label': 'Borough', 'value': 'neighbourhood_group'},
{'label': 'Neighbourhood', 'value': 'neighbourhood'},
{'label': 'Rooms in Listing', 'value': 'room_type'},
], value=['neighbourhood_group','room_type'],
multi=True
),
html.Label('Select Business Area'),
dcc.Dropdown(
id='Multi-Select Dropdown Business Area',
options=[{'label': i, 'value': i} for i in available_indicators]
, value=[],
multi=True
),
dcc.Graph(id='sankey', style={'layout': {'height':1000}}),
],style={'width': '58%', 'display': 'inline-block'}), #left side div
html.Div([
html.Table([
html.Tr([html.Td(['Histogram of:']), html.Td(id='hover')])
]),
dcc.Graph(id='hover-line'),
html.Label('Limits Calendar Heatmap, to add limit choice'),
dcc.Graph(id='calendar', figure=cal_fig),
html.Label('Can we add a percent flow hover, as well as commentary box? also add color shading to sankey and research hovertools'),
], style={'width': '39%', 'float': 'right', 'overflowY': 'scroll', 'display': 'inline-block'}), #right side div
])#, style={'columnCount': 2}) #overall style)
"""hover histogram"""
import json
@app.callback(
Output('hover','children'),
[Input('sankey','hoverData')])
def show_click(hoverData):
a=hoverData['points'][0]["label"]
return a
@app.callback(
Output('hover-line','figure'),
[Input('sankey','hoverData')])
def show_click_line(hoverData):
a = hoverData['points'][0]["label"]
dftemp=df[df["neighbourhood"]==a]
if dftemp.empty:
dftemp=df[df["neighbourhood_group"]==a]
if dftemp.empty:
dftemp=df[df["room_type"]==a]
return px.histogram(dftemp, x="number_of_reviews")
"""sankey graph"""
# add multiple inputs, for path as well
@app.callback(
Output('sankey', 'figure'),
[Input('Multi-Select Dropdown Path', 'value'),
Input('Multi-Select Dropdown Business Area', 'value')])
def update_figure(path,select):#month,day,value):
if len(select)!=0:
filtered_df=df[df["neighbourhood"]==select[0]]
if len(select)==2:
filtered_df=df[(df["neighbourhood"]==select[0]) | (df["neighbourhood"]==select[1])]
else:
filtered_df=df
a = path[0]
if len(path)>1:
b = path[1]
if len(path)>2:
c = path[2]
if len(path)>3:
d = path[3]
return genSankey(filtered_df,cat_cols=[a,b,c,d],value_cols='number_of_reviews',title='Number of Reviews')
return genSankey(filtered_df,cat_cols=[a,b,c],value_cols='number_of_reviews',title='Number of Reviews')
return genSankey(filtered_df,cat_cols=[a,b],value_cols='number_of_reviews',title='Number of Reviews')
return genSankey(filtered_df,cat_cols=[a],value_cols='number_of_reviews',title='Number of Reviews')
if __name__ == '__main__':
app.run_server(debug=False)