from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')
# Initialize dashboard
app = Dash(__name__)
# fig = go.Figure() # or any Plotly Express function e.g. px.bar(...)
# Define layout widgets for interaction
app.layout = html.Div(children = [ # Put the widgets into a div
html.H1('Dashboard',style={'textAlign': 'center','font-size': 40}),
dcc.Graph(id='year-graph', figure=None), # Give the graph a name for referencing.
# html.Div(["Input Year: ", dcc.Input(id='input-year', value='2010', type ='number', style={'height':'50px', 'font-size': 35}),],
dcc.Slider( # Initialize slider with range (min year, max year)
df['year'].min(),
df['year'].max(),
step=None,
value=df['year'].min(),
marks={str(year): str(year) for year in df['year'].unique()},
id='year-slider' # Give the slider a name
),
])
# Define interactive function and connect with widgets
@app.callback(
Output(component_id = 'year-graph', component_property = 'figure'), # Give output to graph
Input(component_id = 'year-slider', component_property = 'value')) # Take input from slider
# multiple inputs/outpust : callback([Output(...), Output(...)] , [Input(...), Input(...)])
# Define the plotly express function for suitable chart (scatter/ pie etc)
# Skeleton code for possible graphs : https://plotly.com/python/plotly-express/
def update_figure(value):
filtered_df = df[df.year == value]
fig1 = px.scatter(filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55)
fig1.update_layout(transition_duration=500)
return fig1
# App runner
if __name__ == '__main__':
app.run_server(port = 8002, host = '127.0.0.1', debug=False)