Upload 2 files

app.py

@@ -10,9 +10,6 @@ import plotly.graph_objects as go
 import plotly.express as px
 import time
 
-# ======================
-# NL labels
-# ======================
 FEATURE_LABELS = {
     "age": "Leeftijd",
     "sex": "Geslacht",
@@ -50,28 +47,22 @@ In de praktijk gebruiken artsen en onderzoekers zo'n plot om patronen en verband
 Met AI kunnen we patronen vinden die je met het blote oog nooit zou zien. Dat maakt dit niet alleen een mooie visualisatie, maar ook een knap stukje technologie met échte waarde voor onderzoek en zorg.  
 
 **Speel zelf de onderzoeker!**  
-Doe alsof je een arts bent en kies links bovenin een waarde, bijvoorbeeld **cholesterol**, **leeftijd** of **geslacht**. Klik daarna op *Update visualisaties* en ontdek je eigen patronen in de data.  
+Doe alsof je een arts bent en kies links bovenin een waarde, bijvoorbeeld **cholesterol**, **leeftijd** of **geslacht**. Klik daarna op **Update visualisaties** en ontdek je eigen patronen in de data.  
 """
 
-# ======================
-# Data helpers
-# ======================
+# -------------------- Data helpers --------------------
 def load_diabetes_df():
     d = datasets.load_diabetes()
-    X = pd.DataFrame(d.data, columns=d.feature_names)  # standardized features
+    X = pd.DataFrame(d.data, columns=d.feature_names)  # gestandaardiseerd
     y = pd.Series(d.target, name="target")
-    df = X.copy()
-    df["target"] = y
+    df = X.copy(); df["target"] = y
     return df
 
 def compute_overview_table(df: pd.DataFrame):
-    """Gemiddelde + % boven/onder gemiddelde voor kernmetingen (gestandaardiseerd)."""
     keys = ["bmi","bp","s1","s2","s3","s4","s5","s6"]
     rows = []
     for k in keys:
         vals = df[k].dropna().values
-        if vals.size == 0:
-            continue
         mean = float(vals.mean())
         pct_above = float((vals > 0).mean() * 100.0)  # 0 ≈ globaal gemiddelde
         pct_below = float((vals < 0).mean() * 100.0)
@@ -82,35 +73,11 @@ def compute_overview_table(df: pd.DataFrame):
             "% onder gemiddelde": round(pct_below, 1),
         })
     table = pd.DataFrame(rows)
-    note = (
-        "Let op: waarden in deze dataset zijn **gestandaardiseerd**. "
-        "`0` betekent ongeveer het **algemene gemiddelde**. "
-        "Positief = hoger dan gemiddeld, negatief = lager dan gemiddeld."
-    )
+    note = ("Let op: waarden in deze dataset zijn **gestandaardiseerd**. `0` ≈ algemeen gemiddelde. "
+            "Positief = hoger dan gemiddeld, negatief = lager dan gemiddeld.")
     return table, note
 
-def compute_top_correlations(df: pd.DataFrame, top_n: int = 6):
-    feats = [c for c in df.columns if c != "target"]
-    corr = pd.DataFrame(df[feats]).corr()
-    pairs = []
-    for i, a in enumerate(feats):
-        for j, b in enumerate(feats):
-            if j <= i:
-                continue
-            pairs.append({
-                "Combinatie": f"{FEATURE_LABELS.get(a,a)} ↔ {FEATURE_LABELS.get(b,b)}",
-                "Correlatie": corr.loc[a, b]
-            })
-    out = pd.DataFrame(pairs)
-    out["Sterkte (|r|)"] = out["Correlatie"].abs()
-    out = out.sort_values("Sterkte (|r|)", ascending=False).head(top_n).reset_index(drop=True)
-    out["Correlatie"] = out["Correlatie"].round(3)
-    out["Sterkte (|r|)"] = out["Sterkte (|r|)"].round(3)
-    return out[["Combinatie", "Correlatie", "Sterkte (|r|)"]]
-
-# ======================
-# PCA helpers
-# ======================
+# -------------------- PCA helpers --------------------
 def compute_pca(df: pd.DataFrame, n_components: int, standardize: bool):
     feats = [c for c in df.columns if c != "target"]
     X = df[feats].values
@@ -125,131 +92,87 @@ def compute_pca(df: pd.DataFrame, n_components: int, standardize: bool):
     expl = pca.explained_variance_ratio_
     return feats, Xs, Z, loadings, expl
 
-# ======================
-# Plot builders
-# ======================
+# -------------------- Plot builders --------------------
 def build_biplot_plotly(df, Z, loadings, feats, color_key, arrow_scale=2.0):
-    # Hovertext met relevante velden
-    hover_text = []
+    # Hover info
     fields = ["bmi","bp","s1","s2","s3","s4","s5","s6","age","sex","target"]
-    for idx in range(len(df)):
-        parts = [f"{FEATURE_LABELS.get(k,k)}: {df.iloc[idx][k]:.3f}" for k in fields]
-        hover_text.append("<br>".join(parts))
-
+    hover_text = [
+        "<br>".join(f"{FEATURE_LABELS.get(k,k)}: {df.iloc[i][k]:.3f}" for k in fields)
+        for i in range(len(df))
+    ]
     fig = go.Figure()
     fig.add_trace(go.Scatter(
-        x=Z[:, 0], y=Z[:, 1],
-        mode="markers",
+        x=Z[:,0], y=Z[:,1], mode="markers",
         marker=dict(size=8, color=df[color_key].values),
-        text=hover_text,
-        hovertemplate="%{text}<extra></extra>"
+        text=hover_text, hovertemplate="%{text}<extra></extra>"
     ))
-
-    # Loading arrows (PC1/PC2)
+    # loading pijlen
     for i, key in enumerate(feats):
-        x = loadings[i, 0] * arrow_scale
-        y = loadings[i, 1] * arrow_scale
-        fig.add_annotation(x=x, y=y, ax=0, ay=0,
-                           xref="x", yref="y", axref="x", ayref="y",
+        x = loadings[i,0]*arrow_scale; y = loadings[i,1]*arrow_scale
+        fig.add_annotation(x=x, y=y, ax=0, ay=0, xref="x", yref="y", axref="x", ayref="y",
                            showarrow=True, arrowhead=3)
-        fig.add_annotation(x=x*1.05, y=y*1.05, text=FEATURE_LABELS.get(key, key),
+        fig.add_annotation(x=x*1.05, y=y*1.05, text=FEATURE_LABELS.get(key,key),
                            showarrow=False, font=dict(size=10))
-
-    fig.update_layout(
-        title="PCA-biplot (2D, hover voor details)",
-        xaxis_title="PC1",
-        yaxis_title="PC2",
-        height=520,
-        margin=dict(l=0, r=0, t=40, b=0)
-    )
+    fig.update_layout(title="PCA-biplot (2D, hover)", xaxis_title="PC1", yaxis_title="PC2",
+                      height=520, margin=dict(l=10, r=10, t=40, b=10))
     return fig
 
 def build_biplot_matplotlib(df, Z, loadings, feats, color_key, arrow_scale=2.0, point_size=32, alpha=0.85):
-    # Matplotlib variant voor PNG-export
-    fig = plt.figure(figsize=(7.8, 5.6))
+    fig = plt.figure(figsize=(7.6, 5.2))
     ax = fig.add_subplot(111)
-    sc = ax.scatter(Z[:, 0], Z[:, 1], c=df[color_key].values, s=point_size, alpha=alpha)
-    cbar = plt.colorbar(sc, ax=ax, pad=0.02)
-    cbar.set_label(f"Kleur: {FEATURE_LABELS.get(color_key, color_key)}")
-    ax.set_xlabel("PC1"); ax.set_ylabel("PC2")
-    ax.set_title("PCA-biplot — punten + pijlen")
-    for i, key in enumerate(feats):
-        x = loadings[i, 0] * arrow_scale
-        y = loadings[i, 1] * arrow_scale
-        ax.arrow(0, 0, x, y, head_width=0.05, head_length=0.08, fc="k", ec="k", length_includes_head=True)
-        ax.text(x*1.08, y*1.08, FEATURE_LABELS.get(key, key), fontsize=9, ha="center", va="center")
-    ax.axhline(0, color="grey", linewidth=0.6, linestyle=":")
-    ax.axvline(0, color="grey", linewidth=0.6, linestyle=":")
-    ax.grid(True, linestyle=":", linewidth=0.6)
-    plt.tight_layout()
+    sc = ax.scatter(Z[:,0], Z[:,1], c=df[color_key].values, s=point_size, alpha=alpha)
+    cbar = plt.colorbar(sc, ax=ax, pad=0.02); cbar.set_label(f"Kleur: {FEATURE_LABELS.get(color_key,color_key)}")
+    ax.set_xlabel("PC1"); ax.set_ylabel("PC2"); ax.set_title("PCA-biplot — PNG-export")
+    for i,key in enumerate(feats):
+        x=loadings[i,0]*arrow_scale; y=loadings[i,1]*arrow_scale
+        ax.arrow(0,0,x,y, head_width=0.05, head_length=0.08, fc="k", ec="k", length_includes_head=True)
+        ax.text(x*1.08, y*1.08, FEATURE_LABELS.get(key,key), fontsize=9, ha="center", va="center")
+    ax.axhline(0,color="grey",linewidth=0.6,linestyle=":"); ax.axvline(0,color="grey",linewidth=0.6,linestyle=":")
+    ax.grid(True,linestyle=":",linewidth=0.6); fig.tight_layout()
     return fig
 
 def build_pca3d(Z3, color_vals):
-    fig = go.Figure(data=[go.Scatter3d(
-        x=Z3[:, 0], y=Z3[:, 1], z=Z3[:, 2],
-        mode="markers",
-        marker=dict(size=4, color=color_vals, opacity=0.85)
-    )])
-    fig.update_layout(
-        title="PCA 3D — PC1 · PC2 · PC3 (sleep om te draaien)",
-        scene=dict(xaxis_title="PC1", yaxis_title="PC2", zaxis_title="PC3"),
-        margin=dict(l=0, r=0, t=40, b=0),
-        height=520
-    )
+    fig = go.Figure(data=[go.Scatter3d(x=Z3[:,0], y=Z3[:,1], z=Z3[:,2], mode="markers",
+                                       marker=dict(size=4, color=color_vals, opacity=0.85))])
+    fig.update_layout(title="PCA 3D — PC1·PC2·PC3 (sleep om te draaien)",
+                      scene=dict(xaxis_title="PC1", yaxis_title="PC2", zaxis_title="PC3"),
+                      height=520, margin=dict(l=10, r=10, t=40, b=10))
     return fig
 
 def build_variance_plot(expl):
-    fig = plt.figure(figsize=(7.8, 3.8))
+    fig = plt.figure(figsize=(7.6, 3.6))
     ax = fig.add_subplot(111)
-    xs = np.arange(1, len(expl) + 1)
+    xs = np.arange(1, len(expl)+1)
     ax.bar(xs, expl, width=0.8, align="center")
     ax.plot(xs, np.cumsum(expl), marker="o")
-    ax.set_xticks(xs)
-    ax.set_xlabel("Principal Component")
-    ax.set_ylabel("Explained variance ratio")
+    ax.set_xticks(xs); ax.set_xlabel("Principal Component"); ax.set_ylabel("Explained variance ratio")
     ax.set_title("Uitlegvariantie per component (balken) + cumulatief (lijn)")
-    ax.grid(True, linestyle=":", linewidth=0.6)
-    plt.tight_layout()
-    return fig
-
-def build_corr_heatmap(df: pd.DataFrame):
-    feats = [c for c in df.columns if c != "target"]
-    corr = pd.DataFrame(df[feats]).corr()
-    order = corr.abs().sum().sort_values(ascending=False).index.tolist()
-    corr_sorted = corr.loc[order, order]
-    fig = px.imshow(corr_sorted, text_auto=False, aspect="auto",
-                    color_continuous_scale="RdBu", origin="lower", zmin=-1, zmax=1)
-    fig.update_layout(title="Correlatie-heatmap (gesorteerd op sterkte)",
-                      height=520, margin=dict(l=0, r=0, t=40, b=0))
+    ax.grid(True, linestyle=":", linewidth=0.6); fig.tight_layout()
     return fig
 
 def build_hist_box(df: pd.DataFrame, color_key: str):
     series = df[color_key].dropna()
-    fig_hist = px.histogram(series, nbins=30, title=f"Histogram — {FEATURE_LABELS.get(color_key,color_key)}")
-    fig_box = px.box(series, points="outliers", title=f"Boxplot — {FEATURE_LABELS.get(color_key,color_key)}")
+    fig_hist = px.histogram(series, nbins=30, title=f"Histogram — {FEATURE_LABELS.get(color_key,color_key)}", height=360)
+    fig_hist.update_layout(margin=dict(l=10, r=10, t=40, b=10))
+    fig_box = px.box(series, points="outliers", title=f"Boxplot — {FEATURE_LABELS.get(color_key,color_key)}", height=360)
+    fig_box.update_layout(margin=dict(l=10, r=10, t=40, b=10))
     return fig_hist, fig_box
 
-# ======================
-# Controllers
-# ======================
+# -------------------- Controllers --------------------
 def controller(color_label="BMI (Body Mass Index)", n_components=10, standardize=True, arrow_scale=2.0):
     df = load_diabetes_df()
     feats, Xs, Z, loadings, expl = compute_pca(df, n_components, standardize)
     color_key = LABEL_TO_KEY.get(color_label, "bmi")
     color_vals = df[color_key].values
-    color_label_nl = FEATURE_LABELS.get(color_key, color_key)
 
-    # Plots
     fig_biplot = build_biplot_plotly(df, Z, loadings, feats, color_key, arrow_scale=arrow_scale)
-    # 3D (zorg voor minstens 3 componenten)
+    # 3D (minstens 3 componenten)
     if Z.shape[1] < 3:
-        pca3 = PCA(n_components=3)
-        Z3 = pca3.fit_transform(Xs)
+        pca3 = PCA(n_components=3); Z3 = pca3.fit_transform(Xs)
     else:
         Z3 = Z[:, :3]
     fig3d = build_pca3d(Z3, color_vals)
     fig_variance = build_variance_plot(expl)
-    fig_heatmap = build_corr_heatmap(df)
     fig_hist, fig_box = build_hist_box(df, color_key)
 
     # Tabel top-features
@@ -272,13 +195,13 @@ def controller(color_label="BMI (Body Mass Index)", n_components=10, standardize
 
     summary_md = f"""
 ### Wat zie je hier?
+- **Klik op _Update visualisaties_** om alles te verversen met jouw keuze.
 - **Hover** over punten voor exacte waarden (BMI, bloeddruk, cholesterol, glucose, leeftijd, geslacht, etc.).
 - **2D-biplot** met pijlen (belangrijkste metingen) en **3D-view** voor extra diepte.
 - **Uitlegvariantieplot**: laat zien hoeveel variatie elke component uitlegt.
-- **Correlatie-heatmap**: toont welke metingen samen bewegen (gesorteerd op sterkte).
-- **Histogram + boxplot**: verdeling en spreiding van de gekozen meting ({color_label_nl}).
+- **Histogram + boxplot**: verdeling en spreiding van de gekozen meting ({FEATURE_LABELS.get(color_key,color_key)}).
 """
-    return fig_biplot, fig3d, fig_variance, table, overview_df, overview_note, summary_md, fig_heatmap, fig_hist, fig_box
+    return fig_biplot, fig3d, fig_variance, table, overview_df, overview_note, summary_md
 
 def animate_pca(color_label="BMI (Body Mass Index)", point_size=32, alpha=0.85, n_components=10, standardize=True, frames=40, pause=0.0):
     df = load_diabetes_df()
@@ -287,19 +210,16 @@ def animate_pca(color_label="BMI (Body Mass Index)", point_size=32, alpha=0.85,
     color_vals = df[color_key].values
     for i in range(frames):
         t = i / max(1, frames-1)
-        w1 = min(1.0, t * 2.0)
-        w2 = max(0.0, (t - 0.5) * 2.0)
+        w1 = min(1.0, t * 2.0); w2 = max(0.0, (t - 0.5) * 2.0)
         coords = np.column_stack([Z[:, 0] * w1, Z[:, 1] * w2])
-        fig = plt.figure(figsize=(7.8, 5.6))
+        fig = plt.figure(figsize=(7.6, 5.2))
         ax = fig.add_subplot(111)
         ax.scatter(coords[:, 0], coords[:, 1], c=color_vals, s=point_size, alpha=alpha)
         ax.set_xlabel("PC1 (opbouw)"); ax.set_ylabel("PC2 (opbouw)")
         title = "PCA-projectie (animatie) — " + ("PC1 →" if w2 == 0 else "PC1 + PC2")
         ax.set_title(f"{title} — frame {i+1}/{frames}")
-        ax.axhline(0, color="grey", linewidth=0.6, linestyle=":")
-        ax.axvline(0, color="grey", linewidth=0.6, linestyle=":")
-        ax.grid(True, linestyle=":", linewidth=0.6)
-        plt.tight_layout()
+        ax.axhline(0, color="grey", linewidth=0.6, linestyle=":"); ax.axvline(0, color="grey", linewidth=0.6, linestyle=":")
+        ax.grid(True, linestyle=":", linewidth=0.6); fig.tight_layout()
         yield fig
         if pause > 0:
             time.sleep(pause)
@@ -310,8 +230,7 @@ def export_biplot_png(color_label="BMI (Body Mass Index)", arrow_scale=2.0, poin
     color_key = LABEL_TO_KEY.get(color_label, "bmi")
     fig = build_biplot_matplotlib(df, Z, loadings, feats, color_key, arrow_scale=arrow_scale, point_size=point_size, alpha=alpha)
     path = f"/mnt/data/biplot_{int(time.time())}.png"
-    fig.savefig(path, dpi=150, bbox_inches="tight")
-    plt.close(fig)
+    fig.savefig(path, dpi=150, bbox_inches="tight"); plt.close(fig)
     return path
 
 def export_variance_png(n_components=10, standardize=True):
@@ -319,24 +238,21 @@ def export_variance_png(n_components=10, standardize=True):
     feats, Xs, Z, loadings, expl = compute_pca(df, n_components, standardize)
     fig = build_variance_plot(expl)
     path = f"/mnt/data/variance_{int(time.time())}.png"
-    fig.savefig(path, dpi=150, bbox_inches="tight")
-    plt.close(fig)
+    fig.savefig(path, dpi=150, bbox_inches="tight"); plt.close(fig)
     return path
 
-# ======================
-# UI
-# ======================
-with gr.Blocks(title="PCA Dashboard — Diabetes (compleet)") as demo:
+# -------------------- UI --------------------
+with gr.Blocks(title="PCA Dashboard — Diabetes (netjes & compleet)") as demo:
     gr.HTML("""
     <style>
-      .card {background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);}
       .callout {padding:12px 14px; border-left:4px solid #2563eb; background:#f1f5f9; border-radius:8px; margin: 8px 0 18px;}
-      .smallnote {font-size: 0.92em; opacity: 0.85;}
+      .cta {padding:10px 12px; border:1px dashed #2563eb; background:#eff6ff; border-radius:8px; margin-top:6px;}
     </style>
     """)
 
-    gr.Markdown("# PCA Dashboard — Diabetes (compleet)")
+    gr.Markdown("# PCA Dashboard — Diabetes (netjes & compleet)")
     gr.Markdown(MEDICAL_MD)
+    gr.HTML('<div class="callout"><b>Belangrijk:</b> kies links je instellingen en klik daarna op <b>Update visualisaties</b>.     Wil je de stap-voor-stap projectie zien? Klik op <b>▶ Animate PCA</b>.</div>')
 
     with gr.Row():
         with gr.Column(scale=1):
@@ -347,12 +263,13 @@ with gr.Blocks(title="PCA Dashboard — Diabetes (compleet)") as demo:
                 n_components = gr.Slider(3, 10, value=10, step=1, label="Aantal PCA-componenten")
                 standardize = gr.Checkbox(value=True, label="Standaardiseer metingen (aanbevolen)")
                 arrow_scale = gr.Slider(0.5, 5.0, value=2.0, step=0.1, label="Pijl-schaal (2D-biplot)")
-                run_btn = gr.Button("Update visualisaties")
-                gr.HTML('<div class="callout smallnote">💡 <b>Tip:</b> Kies links een meting (bijv. BMI of cholesterol) en klik daarna op <b>Update visualisaties</b>.</div>')
+                run_btn = gr.Button("🔄 Update visualisaties")
+                gr.HTML('<div class="cta"><b>Klik hierna op: "🔄 Update visualisaties"</b> om alle grafieken te verversen.</div>')
             with gr.Group():
                 gr.Markdown("### Animatie")
                 animate_btn = gr.Button("▶ Animate PCA (PC1 → PC2)")
-                anim_plot = gr.Plot(label="Animatie van projectie")
+                gr.HTML('<div class="cta"><b>Klik op: "▶ Animate PCA"</b> om de projectie stap-voor-stap te zien.</div>')
+                anim_plot = gr.Plot(label="Animatie van projectie", height=420)
             with gr.Group():
                 gr.Markdown("### Downloads")
                 dl_biplot = gr.DownloadButton("Download biplot (PNG)")
@@ -362,51 +279,42 @@ with gr.Blocks(title="PCA Dashboard — Diabetes (compleet)") as demo:
             with gr.Row():
                 with gr.Column():
                     gr.Markdown("### Biplot (2D, hover)")
-                    plot_biplot = gr.Plot()
+                    plot_biplot = gr.Plot(height=520)
                 with gr.Column():
                     gr.Markdown("### 3D PCA (PC1–PC3)")
-                    plot3d = gr.Plot()
+                    plot3d = gr.Plot(height=520)
             with gr.Row():
                 with gr.Column():
                     gr.Markdown("### Uitlegvariantie")
-                    plot_expl = gr.Plot()
+                    plot_expl = gr.Plot(height=360)
                 with gr.Column():
-                    gr.Markdown("### Correlatie-heatmap")
-                    plot_heat = gr.Plot()
+                    gr.Markdown("### Top-features (PC1 / PC2)")
+                    table = gr.Dataframe(headers=["Feature (PC1)", "Loading PC1", "Feature (PC2)", "Loading PC2"], row_count=6, height=360)
             with gr.Row():
                 with gr.Column():
                     gr.Markdown("### Histogram")
-                    plot_hist = gr.Plot()
+                    plot_hist = gr.Plot(height=360)
                 with gr.Column():
                     gr.Markdown("### Boxplot")
-                    plot_box = gr.Plot()
+                    plot_box = gr.Plot(height=360)
             with gr.Row():
-                with gr.Column():
-                    gr.Markdown("### Top-features (PC1 / PC2)")
-                    table = gr.Dataframe(headers=["Feature (PC1)", "Loading PC1", "Feature (PC2)", "Loading PC2"], row_count=6)
                 with gr.Column():
                     gr.Markdown("### Overzicht (gemiddelden & verdeling)")
                     overview_tbl = gr.Dataframe(interactive=False)
-            summary = gr.Markdown()
-            overview_note_md = gr.Markdown()
+                with gr.Column():
+                    gr.Markdown("### Samenvatting")
+                    summary = gr.Markdown()
 
     inputs = [color_feat, n_components, standardize, arrow_scale]
     run_btn.click(fn=controller, inputs=inputs,
-                  outputs=[plot_biplot, plot3d, plot_expl, table, overview_tbl, overview_note_md, summary, plot_heat, plot_hist, plot_box])
+                  outputs=[plot_biplot, plot3d, plot_expl, table, overview_tbl, gr.Markdown(), summary])
     demo.load(fn=controller, inputs=inputs,
-              outputs=[plot_biplot, plot3d, plot_expl, table, overview_tbl, overview_note_md, summary, plot_heat, plot_hist, plot_box])
-
-    animate_btn.click(fn=animate_pca,
-                      inputs=[color_feat],
-                      outputs=anim_plot)
-
-    # Downloads (PNG)
-    dl_biplot.click(fn=export_biplot_png,
-                    inputs=[color_feat, arrow_scale],
-                    outputs=[dl_biplot])
-    dl_var.click(fn=export_variance_png,
-                 inputs=[],
-                 outputs=[dl_var])
+              outputs=[plot_biplot, plot3d, plot_expl, table, overview_tbl, gr.Markdown(), summary])
+
+    animate_btn.click(fn=animate_pca, inputs=[color_feat], outputs=anim_plot)
+
+    dl_biplot.click(fn=export_biplot_png, inputs=[color_feat, arrow_scale], outputs=[dl_biplot])
+    dl_var.click(fn=export_variance_png, inputs=[], outputs=[dl_var])
 
 if __name__ == "__main__":
     demo.queue().launch(server_name="0.0.0.0", server_port=7860, ssr_mode=False, show_api=False)