Mental Load Bubble Tasks

Interaktive Bubble-/Cluster-Visualisierung (Svelte + D3) für mentale Aufgaben („Mental Load“) mit Main-Nodes (Aufgaben) und Sub-Nodes (Teilaufgaben/Steps).
Optimiert für den Einsatz im News-Umfeld: schnell, robust, responsive (width: 100% + feste Höhe) und mit dezenten Animationen (CSS-Intro + optionaler Wiggle).

Features

• Force-basiertes Layout (D3) mit:
  • Cluster-Halten (Subnodes bleiben beim Main)
  • Main-zu-Main Separation (harmonische Verteilung)
  • Kollisionsvermeidung
  • Mindestabstand Main ↔ Sub (damit Subnodes nicht „auf“ dem Main kleben)
  • Ketten-Constraints für Sub-Sub-Nodes (Arrays) – möglichst gerader Verlauf
• Intro-Animation per CSS: Nodes erscheinen in deterministischer Zufallsreihenfolge (inkl. Mains)
• **Dezenter Loop („Wiggle“) **
  • gedrosselt (FPS abhängig von Node-Anzahl)
  • pausiert automatisch, wenn offscreen (IntersectionObserver)
  • respektiert prefers-reduced-motion
• Tooltip mit „Edge-Avoidance“ (flippt nach links/oben, wenn er sonst abgeschnitten würde)
• SCSS (ausgelagert) + @faz/dv-globals

Tech-Stack

• Svelte (mit Vite)
• D3.js ^7.9.0
• SCSS/Sass
• @faz/dv-globals

Installation

npm install

Entwicklung

Startet den lokalen Dev-Server (Vite):

npm run dev

Builds

Standard Build:

npm run build

Preview des Build-Outputs:

npm run preview

Builds für verschiedene Umgebungen/Modes:

npm run test
npm run stage
npm run production
npm run release

Hinweis: production/release sind aktuell Aliase für vite build bzw. vite build --mode ….

Projektstruktur in der lib:

lib/
  MentalBubbles.svelte
  viz/
    types.ts
    utils.ts
    forces.ts
    intro.ts
    wiggle.ts
    chain.ts

Die lib/viz/*-Module kapseln die Logik (Forces, Intro-Delays, Wiggle), die Svelte-Komponente bleibt der Orchestrator (Mount/Resize/Render).

Konfiguration / Tuning

Die wichtigsten Stellschrauben liegen in MentalBubbles.svelte (oder in einem zentralen Config-Objekt, falls ihr das so organisiert):

• Cluster enger/weiter
  • CLUSTER_BASE_RADIUS, CLUSTER_STEP_RADIUS
  • CLUSTER_FORCE_STRENGTH
• Harmonische Verteilung der Main-Nodes
  • Main-Anchor-Force Strength
  • Radius-basierte Main-Separation (margin/strength)
• Kollisionen / Abstände
  • forceCollide().radius(...), .iterations(...)
  • MIN_MAIN_SUB_DISTANCE
• Intro
  • INTRO_NODE_DURATION, Stagger/Jitter (in viz/intro.ts)
• Wiggle
  • FLOAT_FPS_BASE, FLOAT_AMP_MAIN, FLOAT_AMP_SUB
  • Auto-Drossel bei vielen Nodes (in viz/wiggle.ts)
• Ketten (Sub-Sub-Nodes)
  • max. Knickwinkel (z.B. 10°) + Strength (in viz/chain.ts)

Datenformat

Die Komponente erwartet tasks als Array:

type Task = {
  id: number;
  label: string;
  subs: (string | string[])[];
};

• subs: string → einzelner Subnode
• subs: string[] → Kette (Sub → Sub → Sub …)

Beispiel:

const tasks = [
  {
    id: 1,
    label: "Familienkalender: Geburtstag",
    subs: ["Einladungen", ["Termin finden", "Ort klären", "Eintragen"], "Geschenk"],
  },
];

Accessibility / Motion

• prefers-reduced-motion: reduce deaktiviert Intro-Animation und Wiggle (oder reduziert sie, je nach Implementierung).
• Tooltip ist rein visuell (pointer-events: none) und folgt der Maus; optional kann man ARIA ergänzen, falls erforderlich.

Hinweise für Performance im News-Kontext

• D3-Simulation läuft nur zur Layout-Berechnung, nicht permanent (keine live-ticks).
• Wiggle ist bewusst leichtgewichtig und wird offscreen pausiert.
• Bei sehr großen Node-Zahlen empfiehlt sich:
  • Wiggle-FPS weiter reduzieren
  • oder Wiggle nur für Subnodes/ohne Link-Recalc (je nach Design)