# 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
1. Beim Laden der Seite wird ein GET-Request an `/heatmap` gesendet.
2. Die API liefert ein JSON-Objekt:
   ```json
   {
     "matrix": [ [0.3, 0.5, ...], [0.6, 0.8, ...] ],
     "band_center": 125.4,
     "band_width": 12.7,
     "cluster_score": 0.89
   }
   ```
3. Die Daten werden im Browser verarbeitet und per Canvas oder SVG visualisiert.
4. Ä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:
```json
{
  "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

## Lizenz & Copyright
© 2026 Donau2Space.de