From 4dc6bfa3b4f94442dedbdef41cff48d200470259 Mon Sep 17 00:00:00 2001 From: Mika Date: Mon, 19 Jan 2026 12:48:35 +0000 Subject: [PATCH] Add results_visualization/README.md --- results_visualization/README.md | 75 +++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 results_visualization/README.md diff --git a/results_visualization/README.md b/results_visualization/README.md new file mode 100644 index 0000000..237c82d --- /dev/null +++ b/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 \ No newline at end of file