76 lines
2.3 KiB
Python
76 lines
2.3 KiB
Python
import math
|
|
from dash import Dash, dcc, html, Input, Output
|
|
import plotly.express as px
|
|
import numpy as np
|
|
import pandas as pd
|
|
import dash_bootstrap_components as dbc
|
|
|
|
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
|
|
|
|
# generate random normal distributed data for x and y
|
|
# and store it in a pandas DataFrame
|
|
|
|
df = pd.DataFrame({'y': np.random.normal(loc=0, scale=10, size=1000),
|
|
'x': np.random.normal(loc=10, scale=2, size=1000)})
|
|
df_min = math.floor(df["y"].min())
|
|
df_max = math.ceil(df["y"].max())
|
|
|
|
app.layout = html.Div(
|
|
[
|
|
html.H1("Dashboard 2"),
|
|
dbc.Row(
|
|
[
|
|
dbc.Col(
|
|
[
|
|
dcc.Dropdown(
|
|
options=["red", "green", "blue"],
|
|
value="red",
|
|
id="color",
|
|
multi=False,
|
|
)
|
|
],
|
|
width=6,
|
|
),
|
|
dbc.Col(
|
|
[
|
|
dcc.RangeSlider(
|
|
min=df_min,
|
|
max=df_max,
|
|
value=[df_min, df_max],
|
|
id="range",
|
|
)
|
|
],
|
|
width=6,
|
|
),
|
|
]
|
|
),
|
|
dbc.Row(
|
|
[
|
|
dbc.Col([dcc.Graph(id="graph_1")], width=6),
|
|
dbc.Col([dcc.Graph(id="graph_2")], width=6),
|
|
]
|
|
),
|
|
],
|
|
className="m-4",
|
|
)
|
|
|
|
# Now the color selecion and the slider works for both diagrams
|
|
@app.callback(Output("graph_1", "figure"), Input("color", "value"), Input("range", "value"))
|
|
|
|
def update_graph_1(color, range):
|
|
# this filter is used twice. This could be improved
|
|
dff = df[(df['y'] > range[0]) & (df['y'] < range[1])]
|
|
fig = px.histogram(dff, x="y", color_discrete_sequence=[color])
|
|
fig.update_layout()
|
|
return fig
|
|
|
|
@app.callback(Output("graph_2", "figure"), Input("color", "value"), Input("range", "value"))
|
|
|
|
def update_graph_2(color, range):
|
|
dff = df[(df['y'] > range[0]) & (df['y'] < range[1])]
|
|
fig = px.scatter(dff, x='x', y='y', color_discrete_sequence=[color])
|
|
fig.update_layout()
|
|
return fig
|
|
|
|
if __name__ == '__main__':
|
|
app.run_server(debug=True, port=8000) |