Update app.py

app.py

@@ -1,4 +1,4 @@
-# app.py — Titanic Data Adventure (wit thema, vaste layout, uitgebreide intro naast foto)
+# app.py — Titanic Data Adventure (wit thema, vaste layout, 2D passagierskaart met hover)
 import gradio as gr
 import pandas as pd
 import numpy as np
@@ -76,13 +76,32 @@ def make_plot(fig, title):
     )
     return fig
 
-def plot_overleving_per_klasse(dfx):
-    f = px.bar(
-        dfx, x="pclass", color="status", barmode="group",
-        category_orders={"pclass":[1,2,3]},
+def plot_passenger_map(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).
+    """
+    # 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
+
+    fig = px.scatter(
+        dfx,
+        x="age", y="fare",
+        color="status",
+        symbol="pclass",
+        size="family_size",
+        size_max=16,
+        opacity=0.75,
+        hover_data=hover_cols,
         color_discrete_map={"Overleefd":"#1B4B91","Niet overleefd":"#A3B1C6"},
+        labels={"age":"Leeftijd (jaar)", "fare":"Ticketprijs (£)"}
     )
-    return make_plot(f, "Overleving per klasse")
+    # 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)")
 
 def plot_leeftijdsverdeling(dfx):
     f = px.histogram(
@@ -164,7 +183,7 @@ Je voelt de houten reling koud onder je hand. {ending}
     return story
 
 # =========================
-# Introductietekst (uitgebreid, modern paneel)
+# Introductietekst (aangepast: uitleg over passagierskaart)
 # =========================
 INTRO_MD = """
 # 🛳️ Titanic Data Adventure
@@ -177,48 +196,21 @@ Meer dan een eeuw later kijken wij mee — niet met verrekijkers of logboeken, m
 
 ---
 
-## Waarom deze data ertoe doet
-- **Patronen ontrafelen**: cijfers tonen structuur in chaos — welke groepen hadden toegang tot reddingsboten, wie bevond zich waar, en wat betekende dat?  
-- **Mens achter het datapunt**: elke rij is iemands dag, iemands kans, iemands lot.  
-- **Leren van geschiedenis**: ongelijkheid, beslissingen en beperkte middelen — thema’s die vandaag nog steeds resoneren.
-
----
-
 ## Wat je in dit dashboard gaat zien
-1. **Kerncijfers** – Hoeveel passagiers, hoeveel overlevenden, en hoe die verdeeld waren over de **klassen**.  
-2. **Verdelingen** – Leeftijd, geslacht, ticketprijs (*fare*), familieomvang.  
-3. **Verbanden** – Overleving t.o.v. klasse en geslacht; prijsverschillen per klasse; samenhang tussen variabelen.  
-4. **Machine learning** – Een model dat, op basis van historische patronen, jouw **persoonlijke overlevingskans** inschat.  
-5. **Jouw scenario** – Voer je kenmerken in en lees een korte scene die je terugplaatst op het dek, die nacht.
-
----
-
-## De sociologie van de dekken
-- **Klasse** was letterlijk een **fysieke laag** aan boord: 1e klasse hoger en centraler, 3e klasse dieper in het schip.  
-- **Toegang** tot informatie, bemanning en reddingsmiddelen verschilde per dek.  
-- **Normen & regels** (“**women and children first**”) werden niet overal gelijk toegepast; context en chaos bepaalden veel.
-
----
-
-## Hoe lees je de grafieken?
-- **Overleving per klasse**: staafdiagram dat laat zien hoe kans ongelijk verdeeld was.  
-- **Leeftijdsverdeling**: overlappende histogrammen; kijk waar de bulten liggen voor *Overleefd* vs. *Niet overleefd*.  
-- **Geslachtsverdeling**: cirkelgrafiek; benadrukt het effect van sociale normen.  
-- **Fare per klasse**: boxplot; toont spreiding en uitschieters — rijkdom was geen garantie, maar wel een voordeel.
+- **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).
+- **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.
+- **Jouw scenario** — stel je eigen kenmerken in, bereken je kans en lees een korte scène uit die nacht.
 
 ---
 
 ## Wat een model wél en niet doet
-- ✅ **Herkennen van patronen**: het model leert uit combinaties (bijv. *geslacht + klasse + leeftijd*).  
-- ✅ **Schatten, geen zekerheid**: het geeft **kansen**, geen waarheden.  
-- ❌ **Geen moreel oordeel**: data verklaart, maar rechtvaardigt niet.  
-- ❌ **Geen individuele lotsbeschikking**: context die niet in data staat (locatie op het moment, gedrag van omstanders) blijft onzichtbaar.
-
----
-
-### Klaar om te beginnen?
-Scroll door de grafieken, lees de toelichtingen en voer je eigen kenmerken in.  
-Het model berekent je **overlevingskans** en we schetsen een **scène** uit die nacht — zodat data weer mens wordt.
+- ✅ **Herkennen van patronen** in combinaties (bijv. *geslacht + klasse + leeftijd*).  
+- ✅ **Schatten, geen zekerheid** — het geeft **kansen**, geen waarheden.  
+- ❌ Geen moreel oordeel of individuele lotsbeschikking: context buiten de data blijft onzichtbaar.
 """
 
 # =========================
@@ -250,8 +242,9 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
         with gr.Column(scale=2, min_width=420):
             gr.Markdown(INTRO_MD, elem_classes=["intro-card","scroll-md"])
         with gr.Column(scale=1, min_width=320):
-            if HERO_PATH:
-                gr.Image(value=HERO_PATH, interactive=False, show_label=False, elem_classes=["hero-img"])
+            hero_path = get_hero_image_path()
+            if hero_path:
+                gr.Image(value=hero_path, interactive=False, show_label=False, elem_classes=["hero-img"])
             else:
                 gr.Markdown("⚠️ **Geen afbeelding gevonden.** Plaats `titanic_bg.png` of `titanic_bg.jpg` in de root.")
 
@@ -265,7 +258,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="Overleving per klasse")
+        g1 = gr.Plot(label="Passagierskaart (2D)")
         g2 = gr.Plot(label="Leeftijdsverdeling per status")
     with gr.Row():
         g3 = gr.Plot(label="Geslachtsverdeling")
@@ -289,7 +282,7 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
     # callbacks
     def load_graphs():
         return (
-            plot_overleving_per_klasse(df),
+            plot_passenger_map(df),       # NIEUW: 2D passagierskaart
             plot_leeftijdsverdeling(df),
             plot_geslacht(df),
             plot_fare_vs_klasse(df),