Interactive Dashboards and Data Apps with Plotly and Dash/

...

/

Adding Interactivity to Histograms

Adding Interactivity to Histograms

Learn how to add interactivity to histograms in Dash applications.

We'll cover the following...

Final goal

We can allow users to get a better idea about the distribution of a certain indicator in a certain year or more. The difference is that we want to allow them to customize the number of bins. Since we’re now comfortable with handling multiple inputs and outputs, let’s also add some more options for our users. We can also allow users to select multiple years and display multiple years on multiple subplots using faceting. The illustration below shows what we will be working toward to make it clear:

A histogram app allowing the selection of indicator, year(s), and bins
A histogram app allowing the selection of indicator, year(s), and bins

Creating the layout of the application

Let’s start building right away. We won’t be discussing the layout elements such as color and width, but we can always refer to the code repository for the exact solution. We’ll focus on building the interactivity for this. Later on, we will add it to our app.

# Importing required libraries
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Output, Input
# Creating app object and initializing layout 
app = JupyterDash(__name__)
app.layout = html.Div([
# Adding Label and Dropdown components to the div component created
            dbc.Label('Indicator:'),
            dcc.Dropdown(id='hist_indicator_dropdown',
                         value='GINI index (World Bank estimate)',
                         options=[{'label': indicator, 'value': indicator}
                                  for indicator in poverty.columns[3:54]]),
# Adding a dbc.Label and a dcc.Dropdown component to the list in the div 
            dbc.Label('Years:'),
            dcc.Dropdown(id='hist_multi_year_selector',
                         multi=True,
                         placeholder='Select one or more years',
                         options=[{'label': year, 'value': year}
                                  for year in poverty['year'].drop_duplicates().sort_values()]),
# Adding another dbc.Label component and a dcc.Slider component 
            dbc.Label('Modify number of bins:'),
            dcc.Slider(id='hist_bins_slider', 
                       dots=True, min=0, max=100, step=5, included=False,
                       marks={x: str(x) for x in range(0, 105, 5)}),
#  Adding a Graph component
    dcc.Graph(id='indicator_year_histogram'),
])
  • Lines 2–6: We make the necessary imports.
  • Lines 8–9: We create an app object and its layout attribute.
  • Lines 11–15: We add Label and Dropdown components as the first elements to the div just created. The Dropdown component displays the available indicators and is the exact same one we created earlier.
  • Lines 17–22: We add a dbc.Label and a dcc.Dropdown component to the list in the div for indicating that the user can select a year and the actual years to be selected, allowing multiple selections. Note that since this drop-down allows multiple selection, its default value, if provided, needs to be provided as a list.
  • Lines 24–27: Again, to the same list in the div, we add another dbc.Label component and a dcc.Slider component that will allow users to modify the number of bins in the resulting histogram(s). Note that by not setting a default value, Plotly will provide the default number of bins based on the data being analyzed. It would show as 0 in the slider. Users are then free to modify it, if they wish to do so.
  • Line 29
...