Add results_visualization/README.md

results_visualization/README.md

@@ -0,0 +1,75 @@
+# Results Visualization – N=40 Run Set Analysis
+
+## Überblick
+Diese Webanwendung dient zur **Visualisierung der Analyseergebnisse** aus 40 Run-Sets, die das **Retry-Verhalten** und die **Stabilität von Schrittfolgen** klassifizieren. Über eine interaktive Benutzeroberfläche können Metriken, Korrelationen und Stabilitätsverteilungen für verschiedene Runs dargestellt und verglichen werden.
+
+## Ziel
+Die Anwendung soll Forschenden und Entwickelnden ermöglichen, die Stabilität und Wiederholbarkeit unterschiedlicher Konfigurationen übersichtlich zu untersuchen:
+- Erkennen von Stabilitätstrends über Runs hinweg
+- Vergleich zwischen *pinned* und *unpinned* Läufen
+- Analyse der Korrelation zwischen Laufparametern und Ergebnissen
+
+## Hauptfunktionen
+- **Interaktive Diagramme** mit dynamischen Filtern
+- **Abruf der Analysedaten** über die API `/api/results`
+- **Darstellung von Stabilitäts- und Korrelationsmetriken**
+- **Vergleich von pinned/unpinned Runs**
+- **Responsives Layout** für Desktop und Mobile
+- **Kontextsensitive Tooltips** mit farbcodierter Kategorisierung
+
+## Architekturüberblick
+Die Anwendung ist als modulare Web-UI aufgebaut:
+- **Frontend-Logik:** JavaScript-Module (Chart-Rendering, Filterlogik, Eventsteuerung)
+- **Datenquelle:** API-Endpunkt `/api/results` (liefert JSON-Daten)
+- **Darstellung:** Chart.js-basierte Visualisierungskomponenten
+
+### Datenfluss
+1. Beim Laden ruft das Frontend die Daten von `/api/results` ab.
+2. Die Daten werden nach Metriken wie `step_stability_score` und `correlation_coefficient` verarbeitet.
+3. Die Diagramme werden auf Basis der Nutzerfilter dynamisch aktualisiert.
+4. Änderungen an Filtern oder Parametern lösen sofort einen Re-Render der Visualisierungen aus.
+
+## API-Schnittstelle
+**Endpunkt:** `/api/results`
+- **Methode:** `GET`
+- **Beschreibung:** Liefert alle Run-Ergebnisse zur Analyse und Visualisierung.
+- **Erwartete Antwort:**
+  ```json
+  [
+    {
+      "run_id": "string",
+      "step_stability_score": number,
+      "correlation_coefficient": number
+    }
+  ]
+  ```
+
+## Verwendung
+1. NodeJS-Server oder ein kompatibles Backend starten, das die `/api/results`-Route bereitstellt.
+2. Frontend im Browser öffnen (z. B. `index.html`).
+3. Ergebnisse werden automatisch geladen und in Diagrammen dargestellt.
+4. Filter (z. B. pinned/unpinned) anpassen, um Teilmengen zu analysieren.
+
+## Ordnerstruktur
+```
+project-root/
+│
+├── js/
+│   ├── api.js           # Datenabfrage von /api/results
+│   ├── charts.js        # Chart-Initialisierung und Updates
+│   ├── filters.js       # Filterlogik & UI-Events
+│
+├── css/
+│   ├── styles.css       # Layout & Responsiveness
+│
+├── index.html           # Einstiegspunkt der Web-App
+└── README.md            # Diese Datei
+```
+
+## Technische Hinweise
+- Verwendet **Chart.js** für Diagramm-Darstellungen.
+- Läuft vollständig clientseitig; die API muss separat bereitgestellt werden.
+- Unterstützt alle gängigen Browser mit ES6-Unterstützung.
+
+## Lizenz & Copyright
+© 2026 Donau2Space.de