From 2dab2139ce16fea1ba37918e2a7c862882ed7c44 Mon Sep 17 00:00:00 2001 From: Marc Gauch <34353267+marcgauch@users.noreply.github.com> Date: Fri, 2 Jun 2023 12:15:46 +0200 Subject: [PATCH] ADDED: Dashboard 4 and removed typo from example --- dashboard4/main.py | 194 ++++++++++++++++++++++++++++++++++++ dashboard4/requirements.txt | 25 +++++ 2 files changed, 219 insertions(+) create mode 100644 dashboard4/main.py create mode 100644 dashboard4/requirements.txt diff --git a/dashboard4/main.py b/dashboard4/main.py new file mode 100644 index 0000000..441defd --- /dev/null +++ b/dashboard4/main.py @@ -0,0 +1,194 @@ +import math +from dash import Dash, dcc, html, Input, Output +import plotly.express as px +import plotly.graph_objects as go +import numpy as np +import pandas as pd +import dash_bootstrap_components as dbc +from sklearn.datasets import make_blobs + +# new: more than one plot in a callback +# new: one plot as an input for another plot +# new: plotly go object + +app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) + +df = pd.DataFrame( + { + "y": np.random.normal(loc=0, scale=10, size=1000), + "x": np.random.normal(loc=10, scale=2, size=1000), + } +) + +# define cluster colors + +COLORS = {"0": "red", "1": "blue", "2": "grey"} + +X, y = make_blobs(n_samples=100, centers=3, n_features=2, random_state=0) + +cluster_df = pd.DataFrame(data=X, columns=["X", "Y"]) +cluster_df["cluster"] = [str(i) for i in y] + +app.layout = html.Div( + [ + html.Div([html.H1("Dashboard 4")], className="header"), + html.Div( + [ + dcc.Tabs( + id="tabs", + children=[ + dcc.Tab( + label="Tab One", + id="tab_1_graphs", + children=[ + html.Div( + [ + dbc.Row( + [ + dbc.Col( + [ + dcc.Dropdown( + options=[ + "red", + "green", + "blue", + ], + value="red", + id="color", + multi=False, + ) + ], + width=6, + ), + dbc.Col( + [ + dcc.Slider( + min=math.floor( + df["y"].min() + ), + max=math.ceil( + df["y"].max() + ), + id="min_value", + ) + ], + width=6, + ), + ] + ), + dbc.Row( + [ + dbc.Col( + [dcc.Graph(id="graph_1")], width=6 + ), + dbc.Col( + [dcc.Graph(id="graph_2")], width=6 + ), + ] + ), + ], + className="tab_content", + ), + ], + ), + dcc.Tab( + label="Tab Two", + id="tab_2_graphs", + children=[ + html.Div( + [ + dbc.Row( + [ + dbc.Col( + [dcc.Graph(id="graph_3")], width=8 + ), + dbc.Col( + [dcc.Graph(id="graph_4")], width=4 + ), + ] + ) + ], + className="tab_content", + ) + ], + ), + ], + ) + ], + className="content", + ), + ] +) + + +@app.callback(Output("graph_1", "figure"), Input("color", "value")) +def update_graph_1(dropdown_value_color): + fig = px.histogram(df, x="y", color_discrete_sequence=[dropdown_value_color]) + fig.update_layout(template="plotly_white") + return fig + + +@app.callback(Output("graph_2", "figure"), Input("min_value", "value")) +def update_graph_2(min_value): + if min_value: + dff = df[df["y"] > min_value] + else: + dff = df + fig = px.scatter(dff, x="x", y="y") + fig.update_layout(template="plotly_white") + return fig + + +@app.callback( + Output("graph_3", "figure"), + Output("graph_4", "figure"), + Input("graph_3", "relayoutData"), +) +def update_graph_3_and_4(selected_data): + if selected_data is None or ( + isinstance(selected_data, dict) and "xaxis.range[0]" not in selected_data + ): + cluster_dff = cluster_df + else: + cluster_dff = cluster_df[ + (cluster_df["X"] >= selected_data.get("xaxis.range[0]")) + & (cluster_df["X"] <= selected_data.get("xaxis.range[1]")) + & (cluster_df["Y"] >= selected_data.get("yaxis.range[0]")) + & (cluster_df["Y"] <= selected_data.get("yaxis.range[1]")) + ] + + fig3 = px.scatter( + cluster_dff, + x="X", + y="Y", + color="cluster", + color_discrete_map=COLORS, + category_orders={"cluster": ["0", "1", "2"]}, + height=750, + ) + fig3.update_layout(template="plotly_white", coloraxis_showscale=False) + fig3.update_traces(marker=dict(size=8)) + + group_counts = cluster_dff[["cluster", "X"]].groupby("cluster").count() + + fig4 = go.Figure( + data=[ + go.Bar( + x=group_counts.index, + y=group_counts["X"], + marker_color=[COLORS.get(i) for i in group_counts.index], + ) + ] + ) + fig4.update_layout( + height=750, + template="plotly_white", + title="Counts per cluster", + xaxis_title="cluster", + title_font_size=25, + ) + return fig3, fig4 + + +if __name__ == "__main__": + app.run_server(debug=True, port=8012) diff --git a/dashboard4/requirements.txt b/dashboard4/requirements.txt new file mode 100644 index 0000000..9107e96 --- /dev/null +++ b/dashboard4/requirements.txt @@ -0,0 +1,25 @@ +blinker==1.6.2 +click==8.1.3 +dash==2.9.3 +dash-bootstrap-components==1.4.1 +dash-core-components==2.0.0 +dash-html-components==2.0.0 +dash-table==5.0.0 +Flask==2.3.2 +itsdangerous==2.1.2 +Jinja2==3.1.2 +joblib==1.2.0 +MarkupSafe==2.1.2 +numpy==1.24.3 +packaging==23.1 +pandas==2.0.1 +plotly==5.14.1 +python-dateutil==2.8.2 +pytz==2023.3 +scikit-learn==1.2.2 +scipy==1.10.1 +six==1.16.0 +tenacity==8.2.2 +threadpoolctl==3.1.0 +tzdata==2023.3 +Werkzeug==2.3.4