dash_quickstart_dropdown_line_chart_gapminder_visualization.py

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