Create horizontal bar chart with slider in plotly dash using an interactive plotly data visualization library and dash web library.
Inputs: Slider and radio items
I have created horizontal bar chart with slider in plotly dash. Slider extract data from the data frames for top 10 values for the specific period. There are two charts in this dash app. These two charts connect with radio items. Selecting any radio item, dash app displays corresponding chart. Values change dynamically on these two charts. View below dash app.
See below how this dashboard work?
Layout of radio items and graphs
Create layout of radio items inside html div of graph to show radio items inside grid of horizontal bar chart. See below in the code template.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
html.Div([ html.Div([ # html.P('Select Chart Type', className = 'fix_label', style = {'color': 'black'}), dcc.RadioItems(id = 'radio_items', labelStyle = {"display": "inline-block"}, options = [ {'label': 'Top 10 countries (deaths)', 'value': 'top1'}, {'label': 'Top 10 countries (wounded)', 'value': 'top2'}], value = 'top1', style = {'text-align': 'center', 'color': 'black'}, className = 'dcc_compon'), dcc.Graph(id = 'multi_chart', config = {'displayModeBar': 'hover'}), ], className = "create_container2 six columns"), ], className = "row flex-display"), |
Horizontal Bar Chart 1
Create callback of first horizontal bar chart in this plotly dash app. First of all, create data frames for two horizontal bar chart below the def function. See below lines 6 to 8 in the code template. After that insert if statement to connect first horizontal bar chart with radio items. This horizontal bar chart displays deaths data for top ten countries for each selected period. Use terr2 data frame in x and y parameters to filter data from the data frame terr1. Use margin property in the layout of chart to display full text on the y-axis. See below line 49 in the code template.
|
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 |
@app.callback(Output('multi_chart', 'figure'), [Input('slider_year', 'value')], [Input('radio_items', 'value')]) def update_graph(slider_year, radio_items): terr1 = terr.groupby(['country_txt', 'iyear'])[['nkill', 'nwound']].sum().reset_index() terr2 = terr1[(terr1['iyear'] == slider_year)][['iyear', 'country_txt', 'nkill']].sort_values(by = ['nkill'], ascending = False).nlargest(10, columns = ['nkill']).reset_index() terr3 = terr1[(terr1['iyear'] == slider_year)][['iyear', 'country_txt', 'nwound']].sort_values(by = ['nwound'], ascending = False).nlargest(10, columns = ['nwound']).reset_index() if radio_items == 'top1': return { 'data':[go.Bar( x=terr2['nkill'], y=terr2['country_txt'], text = terr2['nkill'], texttemplate = terr2['country_txt'].astype(str) + ' ' + ':' + ' ' + '%{text:s}' + ' ' + 'Killed', textposition = 'auto', marker = dict(color = '#dd1e35'), orientation = 'h', hoverinfo='text', hovertext= '<b>Country</b>: ' + terr2['country_txt'].astype(str) + '<br>' + '<b>Year</b>: ' + terr2['iyear'].astype(str) + '<br>' + '<b>Killed</b>: ' + [f'{x:,.0f}' for x in terr2['nkill']] + '<br>' )], 'layout': go.Layout( plot_bgcolor='#F2F2F2', paper_bgcolor='#F2F2F2', title={ 'text': 'Year: ' + ' ' + str(slider_year), 'y': 0.9, 'x': 0.5, 'xanchor': 'center', 'yanchor': 'top'}, titlefont={ 'color': 'black', 'size': 15}, hovermode='closest', margin = dict(l = 150), xaxis=dict(title='<b>Killed</b>', color = 'black', showline = True, showgrid = True, showticklabels = True, linecolor = 'black', linewidth = 1, ticks = 'outside', tickfont = dict( family = 'Arial', size = 12, color = 'black' )), yaxis=dict(title='<b></b>', autorange = 'reversed', color = 'black', showline = False, showgrid = False, showticklabels = True, linecolor = 'black', linewidth = 1, ticks = 'outside', tickfont = dict( family = 'Arial', size = 12, color = 'black' ) ), legend = { 'orientation': 'h', 'bgcolor': '#F2F2F2', 'x': 0.5, 'y': 1.25, 'xanchor': 'center', 'yanchor': 'top'}, font = dict( family = "sans-serif", size = 12, color = 'black', ) ) } |
Horizontal Bar Chart 2
Create data and layout sections of second horizontal bar chart below the first horizontal bar chart. Type elif statement to connect second horizontal bar chart with radio item. See below line 1 in the code template. Use terr3 data frame to filter data from the data frame terr1.
|
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 |
elif radio_items == 'top2': return { 'data': [go.Bar( x = terr3['nwound'], y = terr3['country_txt'], text = terr3['nwound'], texttemplate = terr3['country_txt'].astype(str) + ' ' + ':' + ' ' + '%{text:s}' + ' ' + 'Wounded', textposition = 'auto', marker = dict(color = 'orange'), orientation = 'h', hoverinfo = 'text', hovertext = '<b>Country</b>: ' + terr3['country_txt'].astype(str) + '<br>' + '<b>Year</b>: ' + terr3['iyear'].astype(str) + '<br>' + '<b>Wounded</b>: ' + [f'{x:,.0f}' for x in terr3['nwound']] + '<br>' )], 'layout': go.Layout( plot_bgcolor = '#F2F2F2', paper_bgcolor = '#F2F2F2', title = { 'text': 'Year: ' + ' ' + str(slider_year), 'y': 0.9, 'x': 0.5, 'xanchor': 'center', 'yanchor': 'top'}, titlefont = { 'color': 'black', 'size': 15}, hovermode = 'closest', margin = dict(l = 150), xaxis = dict(title = '<b>Wounded</b>', color = 'black', showline = True, showgrid = True, showticklabels = True, linecolor = 'black', linewidth = 1, ticks = 'outside', tickfont = dict( family = 'Arial', size = 12, color = 'black' )), yaxis = dict(title = '<b></b>', autorange = 'reversed', color = 'black', showline = False, showgrid = False, showticklabels = True, linecolor = 'black', linewidth = 1, ticks = 'outside', tickfont = dict( family = 'Arial', size = 12, color = 'black' ) ), legend = { 'orientation': 'h', 'bgcolor': '#F2F2F2', 'x': 0.5, 'y': 1.25, 'xanchor': 'center', 'yanchor': 'top'}, font = dict( family = "sans-serif", size = 12, color = 'black', ) ) } |
Download the full code and CSV data file and learn more about plotly dash on Udemy.
