import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
# Initialize the Dash app
app = dash.Dash(__name__)
# Create data for the plots
df = px.data.iris()
# Layout of the app
app.layout = html.Div([
dcc.Location(id='url', refresh=False), # Listening to URL changes
html.Div([
html.Nav([
html.Ul([
html.Li(dcc.Link('Page 1', href='/')),
html.Li(dcc.Link('Page 2', href='/page2')),
])
]),
]),
html.Div(id='page-content') # Content will be displayed here
])
# Display the content of Page 1
@app.callback(
Output('page-content', 'children'),
Input('url', 'pathname')
)
def display_page(pathname):
if pathname == '/page2':
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species")
return html.Div([
html.H1('Page 2 - Scatter plot'),
dcc.Graph(figure=fig)
])
# Default page (Page 1)
fig = px.line(df, x="sepal_width", y="sepal_length", color="species")
return html.Div([
html.H1('Page 1 - Line plot'),
dcc.Graph(figure=fig)
])
# Run the app
if __name__ == '__main__':
app.run_server(debug=True)