Add visualization_tool/README.md

visualization_tool/README.md

@@ -0,0 +1,58 @@
+# Frozen Runs Visualization Tool
+
+## Zweck
+Das **Frozen Runs Visualization Tool** dient der Visualisierung und Analyse von Metriken und Timing-Effekten sogenannter *Frozen Runs*. Die Anwendung zeigt statistische Kennzahlen, Bootstrap-Konfidenzintervalle und Effektgrößen über unterschiedliche Runs hinweg. Ziel ist es, Unterschiede zwischen *pinned* und *unpinned* Konfigurationen interaktiv auszuwerten.
+
+## Hauptfunktionen
+- **Visualisierung von Metriken über verschiedene Runs hinweg** – Diagramme zeigen Entwicklungen und Unterschiede.
+- **Filterung nach pinned/unpinned** – Dynamische Filterung ermöglicht gezielte Analyse bestimmter Runs.
+- **Bootstrap-Verteilung und Konfidenzintervalle (CI)** – Darstellung der Unsicherheit und Stabilität der Metriken.
+- **Metrik-Tabelle mit Effektgrößen** – Tabellarische Übersicht der berechneten Effekte.
+- **Interaktive Diagramme** – Diagramme reagieren auf Benutzerinteraktionen, Filter und Hover-Ereignisse.
+
+## Datenfluss
+1. **API-Aufruf**: Die Metrikdaten werden über die Route `/metrics` per GET-Request geladen.
+2. **Verarbeitung**: Das JavaScript-Datenmodul bereitet die Daten auf und extrahiert Kennzahlen.
+3. **Darstellung**: UI-Komponenten aktualisieren sich dynamisch, sobald Filter oder Datenänderungen auftreten.
+
+> Beispiel für den Datenfluss:
+> `/metrics` → `data_module.js` → `visualization_module.js` → DOM / Charts.
+
+## API-Information
+**Route**: `/metrics`  
+**Methode**: `GET`  
+**Parameter**: `?filter=pinned` oder `?filter=unpinned` (optional)  
+**Antwortstruktur**: Array von Objekten mit den Feldern:
+- `metric_name`
+- `run_id`
+- `pinned_flag`
+- `effect_size`
+- `ci_low`, `ci_high`
+
+## Ordnerstruktur
+```
+/
+├─ index.html
+├─ css/
+│  └─ styles.css
+├─ js/
+│  ├─ api.js
+│  ├─ data_module.js
+│  ├─ visualization_module.js
+│  └─ app.js
+└─ README.md
+```
+
+## Nutzung
+1. Anwendung lokal oder auf einem Webserver bereitstellen.
+2. Browser öffnen und auf `index.html` zugreifen.
+3. Die Anwendung lädt die Daten von `/metrics` und zeigt die Visualisierungen an.
+4. Filter und Interaktionen im UI verwenden, um Analysen anzupassen.
+
+## Technische Hinweise
+- **Keine externen grafischen Ressourcen** werden verwendet.
+- **Barrierefreiheit**: Semantische HTML-Struktur und ARIA-Attribute unterstützen eine zugängliche Nutzung.
+- **Responsive Design**: Mobile-first Ansatz mit variablen Layouts auf Basis von CSS-Variablen.
+
+## Lizenz
+© 2026 Donau2Space.de