Heatmap Visualization – Resonanzband Untersuchung

Ziel

Diese Komponente stellt eine interaktive Heatmap zur Visualisierung von Resonanzband-Daten bereit. Ziel ist die Analyse der Band-Lage und Dynamik innerhalb experimenteller Startkohorten. Nutzer können Zeitfenster und Kohorten filtern, um Veränderungen in Bandposition und Intensität zu untersuchen.

Hauptfunktionen

Interaktive Heatmap: Darstellung der Resonanzband-Verteilung mit skalierbarer Farbpalette.
Dynamische Datenanbindung: Abruf der Heatmap-Daten über die API /heatmap (GET).
Filtersteuerung: Auswahl von Kohorte und Zeitfenster zur gezielten Analyse.
Metriken: Anzeige zusätzlicher Werte wie band_center, band_width und cluster_score.
Tooltip-Interaktion: Detailinformationen pro Heatmap-Zelle durch Hover-Aktion.
Responsive Darstellung: Anpassung für verschiedene Bildschirmgrößen.

Datenflussübersicht

Beim Laden der Seite wird ein GET-Request an /heatmap gesendet.

Die API liefert ein JSON-Objekt:

{
  "matrix": [ [0.3, 0.5, ...], [0.6, 0.8, ...] ],
  "band_center": 125.4,
  "band_width": 12.7,
  "cluster_score": 0.89
}

Die Daten werden im Browser verarbeitet und per Canvas oder SVG visualisiert.
Änderungen an Filtern lösen ein erneutes Datenladen und Re-Rendering aus.

API-Nutzung

Route: /heatmap

Methode: GET

Optionale Parameter:

cohort_id: ID der Kohorte, deren Daten geladen werden sollen
time_window: Zeitbereich zur Beschränkung der Darstellung

Response-Format: JSON-Objekt mit Heatmap-Matrix und Metadaten:

{
  "matrix": number[][],
  "band_center": number,
  "band_width": number,
  "cluster_score": number
}

Verwendung in Dateien:

js/api.js: Abfrage der Daten über Fetch.
js/app.js: Verarbeitung, Rendering und Benutzerinteraktion.

Dateistruktur

│
├─ js/
│  ├─ api.js        # Schnittstellenaufrufe zur Heatmap-API
│  └─ app.js        # Hauptlogik und Eventsteuerung
│
├─ css/
│  └─ styles.css    # Layout, Farbskala, Tooltip-Stile
│
├─ index.html       # Einstiegspunkt der Anwendung
└─ README.md        # Projektdokumentation

Entwicklungshinweise

Mobile-First CSS-Ansatz
Verwendung semantischer HTML-Struktur (main, section, header, footer)
Keine externen Assets oder Fonts
Nutzung moderner ES6+ Features (const/let, async/await, Template Literals)
Alle API-Aufrufe erfolgen asynchron mit Fehlerhandling

2.5 KiB Raw Blame History Unescape Escape