73 lines
2.5 KiB
Markdown
73 lines
2.5 KiB
Markdown
# 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
|