Update app.py

app.py

@@ -1,4 +1,4 @@
-# app.py — Titanic Data Adventure (wit thema, vaste layout, 2D passagierskaart met hover)
+# app.py — Titanic Data Adventure (wit thema, vaste layout, 2D overleving vs leeftijd met ronde bolletjes)
 import gradio as gr
 import pandas as pd
 import numpy as np
@@ -76,32 +76,32 @@ def make_plot(fig, title):
     )
     return fig
 
-def plot_passenger_map(dfx):
+def plot_survival_vs_age(dfx):
     """
-    2D puntenkaart: elke passagier = 1 punt.
-    X-as: leeftijd, Y-as: ticketprijs (fare).
-    Kleur = overlevingsstatus, symbool = klasse, grootte = family_size.
-    Hover toont zoveel mogelijk relevante velden (naam indien aanwezig).
+    2D plot: ronde bolletjes; X = leeftijd, Y = overleving (twee rijen).
+    Kleur = geslacht (duidelijk contrast), hover toont rijke passagiersinfo.
     """
-    # Bepaal welke extra velden we kunnen tonen
-    extra_cols = [c for c in ["name","ticket","cabin"] if c in dfx.columns]
-    hover_cols = ["pclass","sex","age","sibsp","parch","family_size","fare","embarked","status"] + extra_cols
+    d = dfx.copy()
+    d["overleving"] = d["survived"].map({0:"Niet overleefd", 1:"Overleefd"})
+    extra_cols = [c for c in ["name","ticket","cabin"] if c in d.columns]
+    hover_cols = ["pclass","sex","age","sibsp","parch","family_size","fare","embarked","overleving"] + extra_cols
 
     fig = px.scatter(
-        dfx,
-        x="age", y="fare",
-        color="status",
-        symbol="pclass",
-        size="family_size",
-        size_max=16,
-        opacity=0.75,
+        d,
+        x="age",
+        y="overleving",                           # categorische y: twee nette rijen
+        color="sex",                              # extra dimensie zonder rommel
         hover_data=hover_cols,
-        color_discrete_map={"Overleefd":"#1B4B91","Niet overleefd":"#A3B1C6"},
-        labels={"age":"Leeftijd (jaar)", "fare":"Ticketprijs (£)"}
+        labels={"age":"Leeftijd (jaar)", "overleving":"Overleving"},
+        color_discrete_map={"Male":"#A3B1C6","Female":"#1B4B91"},
+        render_mode="auto"
+    )
+    fig.update_traces(
+        mode="markers",
+        marker=dict(symbol="circle", size=9, opacity=0.7, line=dict(width=0.6, color="white"))
     )
-    # Zachte jitter om overlappende punten iets te spreiden (alleen visueel: via marker line width klein)
-    fig.update_traces(marker=dict(line=dict(width=0.3, color="#444")))
-    return make_plot(fig, "Passagierskaart — Leeftijd (x) versus Ticketprijs (y)")
+    fig.update_yaxes(categoryorder="array", categoryarray=["Niet overleefd","Overleefd"], title=None)
+    return make_plot(fig, "Overleving (y) versus Leeftijd (x) — ronde bolletjes (hover voor details)")
 
 def plot_leeftijdsverdeling(dfx):
     f = px.histogram(
@@ -140,7 +140,6 @@ HERO_PATH = get_hero_image_path()
 # Interactieve voorspelling + avontuur-tekst
 # =========================
 def predict_and_story(pclass, sex, age, sibsp, parch, fare, embarked):
-    # Encode invoer net als model
     sex_enc = 1 if str(sex).lower().startswith("v") else 0   # Vrouw=1, Man=0
     embarked_enc = {"C":0,"Q":1,"S":2}.get(embarked, 2)
     family_size = int(sibsp) + int(parch) + 1
@@ -149,7 +148,6 @@ def predict_and_story(pclass, sex, age, sibsp, parch, fare, embarked):
     prob = float(MODEL.predict_proba(X_row)[0,1])
     pct = prob * 100
 
-    # Avontuur-tekst op basis van invoer en kans
     klasse_txt = {1:"eerste", 2:"tweede", 3:"derde"}.get(int(pclass), "onbekende")
     haven_txt = {"C":"Cherbourg","Q":"Queenstown","S":"Southampton"}.get(embarked, "een onbekende haven")
     rol_txt = "vrouw" if sex_enc==1 else "man"
@@ -183,7 +181,7 @@ Je voelt de houten reling koud onder je hand. {ending}
     return story
 
 # =========================
-# Introductietekst (aangepast: uitleg over passagierskaart)
+# Introductietekst (aangepast: uitleg over 2D-bollenplot)
 # =========================
 INTRO_MD = """
 # 🛳️ Titanic Data Adventure
@@ -192,14 +190,14 @@ INTRO_MD = """
 **April 1912.**  
 De RMS *Titanic* vertrekt richting New York: een drijvend paleis, gevuld met verwachtingen. Aan boord: industriëlen in avondkleding, jonge gezinnen met één koffer, bemanningsleden die elke dag routine tot ritueel verheffen. De zee is kalm; de toekomst lijkt maakbaar.
 
-Meer dan een eeuw later kijken wij mee — niet met verrekijkers of logboeken, maar met **data**. Elk record in deze dataset is een menselijk verhaal: iemand met een plek aan tafel, een ticket, een familie, een keuze. Door de gegevens te verkennen, begrijpen we beter **wie overleefde — en waarom**.
+Meer dan een eeuw later kijken wij mee — niet met verrekijkers of logboeken, maar met **data**. Elk record in deze dataset is een menselijk verhaal. Door de gegevens te verkennen, begrijpen we beter **wie overleefde — en waarom**.
 
 ---
 
 ## Wat je in dit dashboard gaat zien
-- **Passagierskaart (2D)** — elk bolletje is één passagier.  
-  *X-as = leeftijd*, *Y-as = ticketprijs*, **kleur = overleving**, **symbool = klasse**, **grootte = familieomvang**.  
-  Beweeg met de muis over een punt om details te zien (bijv. klasse, geslacht, haven, en – als aanwezig – naam/ticket/cabin).
+- **Overleving versus leeftijd (2D)** — elk **rond bolletje** is één passagier.  
+  *X-as = leeftijd*, *Y-as = overleving* (twee rijen: *Niet overleefd* en *Overleefd*).  
+  **Kleur = geslacht**, en **hover** toont details (klasse, familieomvang, vertrekhaven, prijs en – als aanwezig – naam/ticket/cabin).
 - **Leeftijdsverdeling** — overlappende histogrammen tonen verschillen tussen overlevers en niet-overlevers.  
 - **Geslachtsverdeling** — verhoudingen mannen/vrouwen in de dataset.  
 - **Fare per klasse** — prijsverschillen en spreiding, gekoppeld aan overleving.
@@ -258,7 +256,7 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
     # Visualisaties
     gr.Markdown("## 📊 Verken de data", elem_classes=["panel"])
     with gr.Row():
-        g1 = gr.Plot(label="Passagierskaart (2D)")
+        g1 = gr.Plot(label="Overleving vs Leeftijd (2D)")
         g2 = gr.Plot(label="Leeftijdsverdeling per status")
     with gr.Row():
         g3 = gr.Plot(label="Geslachtsverdeling")
@@ -282,7 +280,7 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
     # callbacks
     def load_graphs():
         return (
-            plot_passenger_map(df),       # NIEUW: 2D passagierskaart
+            plot_survival_vs_age(df),    # NIEUW: ronde bolletjes, Y=overleving
             plot_leeftijdsverdeling(df),
             plot_geslacht(df),
             plot_fare_vs_klasse(df),