Incorporating an Interactive Map into the App

The map that we created together with the Dropdown and Markdown components can become the first exploratory tool in our app. We can remove the population bar chart now, and in its place, we can place the components we just created for users to explore all the indicators, see them on the map, and scroll through the years, and for each indicator, get the full details as well as see the limitations and potential issues. Once something catches the user’s eye, they can then find another chart that gives more detail about the indicator they want, if it exists.

In order to fully incorporate the new functionality into our app, we need to go through the following steps.

Adding definitions

We add the definition of series at the top of the app.py module.

series = pd.read_csv('data/PovStatsSeries.csv')

We add the definition of the multiline_indicator function anywhere before app.layout.

def multiline_indicator(indicator):
    final = []
    split = indicator.split()
    for i in range(0, len(split), 3):
       final.append(' '.join(split[i:i+3]))
    return '<br>'.join(final)

Adding components

We add the Dropdown, Graph, and Markdown components at the top of the app right under the top headings where we previously had the population bar chart. The code shows how, including the component IDs to make it clear, but the full definitions have been omitted. Note we also add a Col component as well as setting the width of another Col component, both using the lg (large) parameter. The first one introduces an empty column before displaying the content, and the second controls the width of the content in this column.