Add data_visualization/README.md

data_visualization/README.md

@@ -0,0 +1,85 @@
+# Resonanzband Analyse – Data Visualization
+
+## Überblick
+Dieses Webinterface dient der interaktiven Visualisierung von Resonanzband-Analyseergebnissen und den Auswirkungen verschiedener Scheduling-Mechanismen. Nutzer können Metriken und Ausreißer grafisch untersuchen, Filter anwenden und dynamisch neue Ergebnisse laden.
+
+## Hauptfunktionen
+- **Diagrammgestützte Darstellung** von Resonanzband-Metriken, einschließlich Ausreißern und Streuungen.
+- **Dynamische Nachladung der Analyseergebnisse** über die API-Route `/results`.
+- **Filterung** nach Laufnummern (`run_id`) und Parametern.
+- **Interaktive Diagramme** mit Tooltip-Details zu Messpunkten.
+- **Responsives Layout** mit getrennter Ansicht für Filter und Visualisierungen.
+
+## Datenfluss
+1. Beim Laden der Seite wird die Anwendung initialisiert.
+2. Über einen GET-Request an `/results` werden Analyseergebnisse abgerufen.
+3. Die Datenstruktur enthält Felder:
+   ```json
+   {
+     "run_id": string,
+     "band_center": number,
+     "band_width_p10_p90": [number, number],
+     "max_outlier": number,
+     "overhead_ms": number
+   }
+   ```
+4. Die Daten werden clientseitig verarbeitet und in Diagrammkomponenten gerendert.
+5. Filteränderungen führen zu neuen API-Aufrufen und aktualisieren die Visualisierung.
+
+## API-Nutzung
+**Route:** `/results`
+
+**Methode:** `GET`
+
+**Optionale Parameter:**
+- `run_id`: Filtert nach einer konkreten Laufnummer.
+- `parameter_filter`: Filtert nach spezifischen Parametern der Analyse.
+
+**Antwort:**
+Array von Objekten gemäß obigem Datenschema.
+
+Beispiel:
+```json
+[
+  {
+    "run_id": "r0037",
+    "band_center": 102.4,
+    "band_width_p10_p90": [98.0, 106.8],
+    "max_outlier": 110.3,
+    "overhead_ms": 4.8
+  }
+]
+```
+
+## Architektur & Struktur
+```
+root/
+├── index.html              # Haupteinstiegspunkt der Anwendung
+├── css/
+│   ├── layout.css          # Styles für Layout, Responsiveness
+│   └── components.css      # Komponenten-spezifische Styles
+├── js/
+│   ├── api.js              # Kommunikation mit /results-Endpoint
+│   ├── charts.js           # Diagramm-Rendering & Interaktivität
+│   └── app.js              # Anwendungseintrittspunkt & Datenflusssteuerung
+└── README.md               # Projektbeschreibung, Nutzung und Hinweise
+```
+
+## Installation & Nutzung
+1. Projektdateien in einen Webserver-Ordner legen (z. B. lokal via `http-server`).
+2. Öffnen Sie `index.html` im Browser.
+3. Daten werden automatisch über `/results` geladen.
+4. Filter können über die Benutzeroberfläche eingestellt werden.
+
+## Entwicklungsumgebung
+- **Frontend:** HTML5, CSS3 (BEM-Style, mobile-first), JavaScript (ES6+)
+- **API:** JSON-basierte REST-Route `/results`
+- **Kompatibilität:** Aktuelle Versionen von Chrome, Firefox, Edge
+
+## Barrierefreiheit
+- ARIA-Labels für alle interaktiven Elemente
+- Fokussteuerung über Tastatur möglich
+- Farbkontraste geprüft nach WCAG-Standard
+
+## Lizenz & Copyright
+© 2026 Donau2Space.de – Alle Rechte vorbehalten.