Add data_visualization/README.md

data_visualization/README.md

@@ -0,0 +1,65 @@
+# Data Visualization für Replikationsanalyse – Experiment 31b
+
+## Übersicht
+Diese Webanwendung visualisiert und analysiert die Replikationsdaten des Experiments **31b**. Hauptziel ist es, Performance-Trends und Engpässe zu erkennen, indem **Bandbreite** und **retry_tailp99** interaktiv gegenüberstellt werden.
+
+## Hauptfunktionen
+- **Interaktive Darstellung** der Replikationsläufe in dynamischen Diagrammen.
+- **Vergleich** zwischen Runs, um Änderungen in Bandbreite und retry_tailp99 zu erkennen.
+- **Filter** nach Segmenttypen: `pinned`, `unpinned`, `near-expiry`.
+- **Zeitbasierte Analyse** der Metriken und Verlaufstrends.
+- **Erkennung von Ausreißern** oder Anomalien mittels visueller Hervorhebung.
+- **Responsives Dashboard**, optimiert für Desktop und Mobile.
+
+## Datenfluss
+1. Die Anwendung ruft Replikationsdaten über den API-Endpunkt `/run-data` ab.
+2. Modul **api.js**: Verarbeitet den Request (`GET /run-data?run_id=<id>`) und gibt die JSON-Daten zurück.
+3. Modul **visualization.js**: Stellt Metriken grafisch dar und synchronisiert die Visualisierung mit Filtereingaben.
+4. UI-Komponenten aktualisieren den DOM in Echtzeit, sobald neue Daten geladen werden.
+
+## API-Referenz
+**Endpunkt:** `/run-data`
+
+- **Methode:** GET
+- **Parameter:** `run_id`
+- **Antwort:**
+  ```json
+  {
+    "run_id": "string",
+    "metrics": {
+      "bandwidth": [ ... ],
+      "retry_tailp99": [ ... ]
+    },
+    "segments": [ ... ]
+  }
+  ```
+- **Verwendung:** Wird im Modul `js/api.js` aufgerufen, um Daten an `js/visualization.js` weiterzugeben.
+
+## Ordnerstruktur
+```
+project_root/
+├── index.html
+├── css/
+│   └── styles.css
+├── js/
+│   ├── api.js
+│   ├── visualization.js
+│   └── ui.js
+└── README.md
+```
+
+## Verwendung
+1. **Setup:** Projektdateien auf einen Webserver oder lokalen Entwicklungsserver legen.
+2. **Start:** `index.html` im Browser öffnen.
+3. **Interaktion:**
+   - Run-ID im Interface auswählen.
+   - Daten werden automatisch über `/run-data` abgerufen.
+   - Diagramme, Tabellen und Filter reagieren dynamisch.
+
+## Technische Hinweise
+- **Keine externen Ressourcen** (Bilder, Icons, Fonts) werden genutzt.
+- **Moderne JS-Features (ES6+)** werden in allen Modulen eingesetzt.
+- Das Dashboard ist **barrierearm** und **responsiv** aufgebaut.
+
+## Copyright
+© 2026 Donau2Space.de