Kapitel 6 · Diagramme mit marimo

Notebook Beispiel mit interkativem Diagramm

Dieses Beispiel soll die Möglichkeiten und die Idee von marimo Notebooks aufzeigen. Das Beispiel zeigt den Aufbau eines Notebooks zur demografischen Entwicklung der Schweizer Gemeinden von 2010 bis 2024 anhand von Musterdaten.

Starte ein neues marimo Programm mit folgender Eingabe im Terminal:

terminal

marimo edit notebook_beispiel.py

Wie bei den vorhergehenden Beispielen sind in der ersten Zelle für das Programm die nötigen Bibliotheken definiert:

Die zweite Zelle beinhaltet Markdown Text und dient zur Beschreibung des Notebook Beispiels:

💡

Wenn eine Zelle nur mo.md() enthält, kann sie in marimo als Markdown-Zelle verwendet bzw. umgewandelt werden.

Die dritte Zelle generiert die Musterdaten für das Beispiel:

# ── Musterdaten ──────────────────────────────────────────────────────────────

JAHRE = list(range(2010, 2025)) #Zeispanne der Daten

# Musterdaten: von 26 Schweizer Gemeinden mit Basiskennzahlen
# Spalten je Gemeinde:
#   name        – Gemeindename
#   kanton      – Kantonskürzel
#   pop         – Bevölkerung (fix, keine Wachstumsrate)
#   aus_base    – Ausländeranteil Basisjahr 2010 (%)
#   alter_base  – Medianalter Basisjahr 2010 (Jahre)
#   aus_rate    – jährliche Zunahme Ausländeranteil (%-Punkte/Jahr)
#   alter_rate  – jährliche Zunahme Medianalter (Jahre/Jahr)
gemeinden_def = [
    ("Zürich",       "ZH", 400000, 31.0, 34.5, 0.30, 0.15),
    ("Winterthur",   "ZH", 110000, 24.0, 40.0, 0.25, 0.12),
    ("Bülach",       "ZH",  22000, 26.0, 39.0, 0.22, 0.10),
    ("Dietikon",     "ZH",  28000, 35.0, 38.0, 0.28, 0.08),
    ("Uster",        "ZH",  36000, 18.0, 40.0, 0.20, 0.10),
    ("Bern",         "BE", 133000, 20.0, 41.0, 0.20, 0.12),
    ("Biel",         "BE",  55000, 30.0, 39.0, 0.25, 0.10),
    ("Thun",         "BE",  43000, 16.0, 41.0, 0.15, 0.13),
    ("Köniz",        "BE",  42000, 14.0, 41.5, 0.12, 0.14),
    ("Genf",         "GE", 200000, 43.0, 38.0, 0.18, 0.10),
    ("Lancy",        "GE",  32000, 46.0, 37.0, 0.22, 0.08),
    ("Vernier",      "GE",  36000, 48.0, 36.5, 0.20, 0.07),
    ("Meyrin",       "GE",  25000, 44.0, 37.0, 0.19, 0.09),
    ("Baden",        "AG",  19000, 28.0, 39.0, 0.24, 0.11),
    ("Aarau",        "AG",  21000, 25.0, 40.0, 0.22, 0.12),
    ("Wettingen",    "AG",  20000, 30.0, 39.0, 0.25, 0.10),
    ("St. Gallen",   "SG",  75000, 32.0, 40.0, 0.27, 0.12),
    ("Rapperswil",   "SG",  27000, 20.0, 41.0, 0.18, 0.13),
    ("Altstätten",   "SG",  10500, 22.0, 41.0, 0.19, 0.12),
    ("Sion",         "VS",  33000, 26.0, 40.0, 0.20, 0.13),
    ("Sierre",       "VS",  16000, 28.0, 40.0, 0.22, 0.12),
    ("Naters",       "VS",   5000, 10.0, 43.0, 0.08, 0.16),
    ("Luzern",       "LU",  82000, 22.0, 40.5, 0.20, 0.12),
    ("Emmen",        "LU",  30000, 26.0, 39.5, 0.23, 0.10),
    ("Basel",        "BS", 177000, 34.0, 41.0, 0.22, 0.13),
    ("Riehen",       "BS",  21000, 22.0, 44.0, 0.15, 0.18),
]

# Zufallsgenerator mit fixem Seed 42 — reproduzierbare Ergebnisse
rng = np.random.default_rng(42)
rows = []
for name, kanton, pop, aus_base, alter_base, aus_rate, alter_rate in gemeinden_def:
    for j, jahr in enumerate(JAHRE): # j = Anzahl Jahre seit 2010
        # Kleines Rauschen simuliert natürliche Schwankungen
        noise_aus   = rng.normal(0, 0.15) # ±0.15%-Punkte
        noise_alter = rng.normal(0, 0.2) # ±0.2 Jahre

# Lineares Wachstum ab Basis + Rauschen
        # Ausländeranteil wird auf max. 58% begrenzt
        aus   = round(min(58, aus_base   + j * aus_rate   + noise_aus),   1)
        alter = round(      alter_base + j * alter_rate + noise_alter, 1)
        rows.append(dict(
            jahr=jahr, gemeinde=name, kanton=kanton,
            bevoelkerung=pop,
            auslaender_pct=aus, # Ausländeranteil in %
            medianalter=alter,  # Medianalter in Jahren
        ))

# Alle Zeilen zu einem DataFrame zusammenführen
# Struktur: eine Zeile pro Gemeinde und Jahr (26 Gemeinden × 15 Jahre = 390 Zeilen)
df = pd.DataFrame(rows)
# Anzeigen der Daten in einer Tabelle
mo.ui.table(df)

💡

mo.ui.table(df) zeigt in einer Tabelle die erzeugten Musterdaten mit den nötigen Spalten.

In der vierten Zelle werden die für die interaktive Grafik nötigen Steuerelemente Jahr und Kantone definiert:

In der fünfte Zelle werden die Steuerelemente angezeigt:

💡

mo.vstack([...]) ordnet die Objekte vertikal und mo.hstack([...]) ordnet die Objekte in horizontal Richtung. Diese Anzeige kann nicht in der Zelle 4 stehen, da slider_jahr.value nicht in der selben Zelle, wie der Slider definiert werden kann.

In der sechsten Zelle werden die Daten für die Anzeige in der Grafik vorbereitet:

# ── Daten filtern ────────────────────────────────────────────────────────
# Aus dem Gesamtdataframe (alle Jahre, alle Kantone) wird nur das
# gewählte Jahr und die gewählten Kantone herausgefiltert.
df_jahr = df[
    (df["jahr"] == slider_jahr.value) &
    (df["kanton"].isin(ms_kanton.value))
].copy()

# Quadrantengrenzen: Mittelwerte über ALLE Jahre und Kantone (nicht nur das
# gefilterte Jahr) — so bleiben die Trennlinien beim Slider-Verschieben stabil
# und springen nicht bei jedem Jahr neu.
x_mid = round(df["auslaender_pct"].mean(), 1)
y_mid = round(df["medianalter"].mean(), 1)

# Achsengrenzen: ebenfalls über alle Daten berechnet, mit kleinem Puffer
# damit Punkte am Rand nicht abgeschnitten werden.
x_min, x_max = 0, df["auslaender_pct"].max() * 1.05
y_min, y_max = df["medianalter"].min() * 0.98, df["medianalter"].max() * 1.02

# ── Quadranten-Labels in den Ecken ───────────────────────────────────────
# Gemeinsame Texteigenschaften für alle vier Labels
kw = dict(fontSize=10, opacity=0.35, fontStyle="italic", color="#333")

In der siebten Zelle werden die Daten über Altair dargestellt:

# Linke zwei Labels: linksbündig, nahe am linken Achsenrand
# y * 0.999 / y * 1.001 = knapp unter/über dem Achsenrand damit der Text
# nicht abgeschnitten wird
_ql_links = alt.Chart(pd.DataFrame([
    {"x": x_min + 0.3, "y": y_max * 0.999, "label": "Jung & international"},
    {"x": x_min + 0.3, "y": y_min * 1.001, "label": "Jung & einheimisch"},
    ])).mark_text(align="left", **kw).encode(
    x=alt.X("x:Q", scale=alt.Scale(domain=[x_min, x_max])),
    y=alt.Y("y:Q", scale=alt.Scale(domain=[y_min, y_max])),
    text="label:N",
)
# Rechte zwei Labels: rechtsbündig, nahe am rechten Achsenrand
_ql_rechts = alt.Chart(pd.DataFrame([
    {"x": x_max * 0.999, "y": y_max * 0.999, "label": "Alt & international"},
    {"x": x_max * 0.999, "y": y_min * 1.001, "label": "Alt & einheimisch"},
])).mark_text(align="right", **kw).encode(
    x=alt.X("x:Q", scale=alt.Scale(domain=[x_min, x_max])),
    y=alt.Y("y:Q", scale=alt.Scale(domain=[y_min, y_max])),
    text="label:N",
)
quad_labels = _ql_links + _ql_rechts

# ── Trennlinien ──────────────────────────────────────────────────────────
linie_h = alt.Chart(pd.DataFrame({"y": [y_mid]})).mark_rule(
    strokeDash=[4, 3], color="#bbb", strokeWidth=1
).encode(y="y:Q")

linie_v = alt.Chart(pd.DataFrame({"x": [x_mid]})).mark_rule(
    strokeDash=[4, 3], color="#bbb", strokeWidth=1
).encode(x="x:Q")

# ── Farben je Kanton ─────────────────────────────────────────────────────
# Fixe Farbzuweisung je Kantonskürzel — gleiche Farbe in jedem Jahr
_FARBEN = {
    "ZH": "#3266ad", "BE": "#b05c30", "GE": "#639922",
    "AG": "#ba7517", "SG": "#993556", "VS": "#0f6e56",
    "LU": "#534ab7", "BS": "#5f5e5a", "VD": "#0f6e56",
    "TI": "#993556", "FR": "#ba7517", "SO": "#3266ad",
    "BL": "#b05c30", "SH": "#639922", "AR": "#534ab7",
    "AI": "#5f5e5a", "GR": "#3266ad", "TG": "#b05c30",
    "NE": "#639922", "JU": "#ba7517", "GL": "#993556",
    "ZG": "#0f6e56", "OW": "#534ab7", "NW": "#5f5e5a",
    "UR": "#3266ad", "SZ": "#b05c30",
}

# Kantone alphabetisch sortieren — gleiche Reihenfolge wie Altair intern
alle_kt = sorted(df["kanton"].unique())

# Farbpalette in derselben Reihenfolge wie alle_kt aufbauen
# Kanton ohne Eintrag in _FARBEN bekommt Grau (#888)
farb_range = [_FARBEN.get(k, "#888") for k in alle_kt]

# ── Bubbles ──────────────────────────────────────────────────────────────
# Hauptlayer: ein Kreis (mark_circle) pro Gemeinde
# opacity=0.78   — leicht transparent damit überlappende Punkte sichtbar bleiben
# stroke="white" — weisser Rand trennt dicht liegende Bubbles visuell
punkte = alt.Chart(df_jahr).mark_circle(
    opacity=0.78, stroke="white", strokeWidth=0.8
).encode(
    # X-Achse: Ausländeranteil in %
    # labelExpr hängt '%' an jeden Achsenwert an (Vega-Expression)
    # domain fixiert die Achse auf den stabilen Gesamtbereich
    x=alt.X(
        "auslaender_pct:Q",
        title="Ausländeranteil (%)",
        scale=alt.Scale(domain=[x_min, x_max]),
        axis=alt.Axis(
            labelExpr="datum.value + '%'",
            labelFontSize=11, titleFontSize=12,
            gridColor="#ebebeb", gridWidth=0.5,
        ),
    ),
    # Y-Achse: Medianalter in Jahren
    y=alt.Y(
        "medianalter:Q",
        title="Medianalter (Jahre)",
        scale=alt.Scale(domain=[y_min, y_max]),
        axis=alt.Axis(
            labelFontSize=11, titleFontSize=12,
            gridColor="#ebebeb", gridWidth=0.5,
        ),
    ),
    # Bubble-Grösse: Bevölkerungszahl
    # range=[30, 1200] — kleinste Bubble 30px², grösste 1200px² Fläche
    size=alt.Size(
        "bevoelkerung:Q",
        title="Bevölkerung",
        scale=alt.Scale(range=[30, 1200]),
        legend=alt.Legend(title="Bevölkerung", orient="right"),
    ),
    # Farbe: Kantonskürzel — fixe Palette aus _FARBEN
    # domain/range müssen in gleicher Reihenfolge sein (alle_kt / farb_range)
    color=alt.Color(
        "kanton:N",
        title="Kanton",
        scale=alt.Scale(domain=alle_kt, range=farb_range),
        legend=alt.Legend(orient="right", title="Kanton"),
    ),
    # Tooltip beim Hover: 5 Felder
    # format=".1f" = eine Dezimalstelle, format="," = Tausendertrennzeichen
    tooltip=[
        alt.Tooltip("gemeinde:N",          title="Gemeinde"),
        alt.Tooltip("kanton:N",            title="Kanton"),
        alt.Tooltip("auslaender_pct:Q",    title="Ausländeranteil %", format=".1f"),
        alt.Tooltip("medianalter:Q",title="Medianalter",format=".1f"),
        alt.Tooltip("bevoelkerung:Q",      title="Bevölkerung",       format=","),
    ],
)

# Labels nur für grosse Gemeinden (≥ 50 000 Einwohner)
# dx=7, dy=-7 verschiebt den Text leicht nach rechts oben vom Mittelpunkt
# damit er die Bubble nicht überlagert
_df_labels = df_jahr[df_jahr["bevoelkerung"] >= 50000]
labels = alt.Chart(_df_labels).mark_text(
    dx=7, dy=-7, fontSize=10, align="left",
).encode(
    x="auslaender_pct:Q",
    y="medianalter:Q",
    text="gemeinde:N",
    color=alt.value("#444"),
)

# ── Legenden-Selektion ───────────────────────────────────────────────────
# selection_point mit bind="legend": Klick auf Legendeneintrag selektiert
# alle Punkte dieses Kantons
_legend_sel = alt.selection_point(fields=["kanton"], bind="legend")

# Selektion dem Punkte-Layer hinzufügen und Opacity konditionieren:
# selektierter Kanton → 0.78 (normal sichtbar)
# nicht selektierte Kantone → 0.07 (fast unsichtbar)
# ohne aktive Selektion → alle 0.78 (Standardzustand)
punkte_sel = punkte.add_params(_legend_sel).encode(
    opacity=alt.condition(_legend_sel, alt.value(0.78), alt.value(0.07)),
)

# ── Chart zusammensetzen ─────────────────────────────────────────────────
# Layer-Reihenfolge bestimmt was vorne liegt:
# quad_labels (Ecktexte) → Trennlinien → Bubbles → Gemeinde-Labels
chart = (
    quad_labels + linie_h + linie_v + punkte_sel + labels
).properties(
    width=620,
    height=480,
    title=f"Demographiequadrant Schweizer Gemeinden — {slider_jahr.value:d}",
)

# Hinweistext unter dem Chart
_info = mo.md("""_Klick auf einen Kanton in der Legende, um ihn hervorzuheben._""")

# Chart und Hinweis vertikal gestapelt ausgeben
# mo.vstack rendert Altair-Objekte direkt ohne mo.ui.altair_chart
mo.vstack([chart, _info])

interaktives Diagramm

💡

Mit dem Befehl mo.vstack([chart, _info]) am Ende der Zelle 7 wird die Grafik angezeigt. Über den Button unter dem Speicher-Button (siehe obiges Bild beim roten Kreis) kann das fertige Notebook so angezeigt werden, wie es im Run Mode dargestellt wird. Beendet man den Edit Mode, kann man den Run Mode mit folgendem Befehl starten.

terminal

marimo run notebook_beispiel.py