plotly_dash_interactive_line_chart_with_country_dropdown.py

1from dash import Dash, html, dcc, callback, Output, Input
2import pandas as pd
3import plotly.express as px
4
5# Incorporate data
6df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')
7
8# Initialize the app
9app = Dash()
10
11# App layout
12app.layout = [
13    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
14    dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
15    dcc.Graph(id='graph-content')
16]
17
18# Controls (callbacks)
19@callback(
20    Output('graph-content', 'figure'),
21    Input('dropdown-selection', 'value')
22)
23def update_graph(value):
24    dff = df[df.country==value]
25    return px.line(dff, x='year', y='pop')
26
27# Run the app
28if __name__ == '__main__':
29    app.run(debug=True)