From b7f7c50e070f85d61c2dbf6531676f8f2dd22824 Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Mon, 23 Mar 2026 11:13:27 +0000
Subject: [PATCH] Add data_visualization/README.md

---
 data_visualization/README.md | 65 ++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 data_visualization/README.md

diff --git a/data_visualization/README.md b/data_visualization/README.md
new file mode 100644
index 0000000..148bcb0
--- /dev/null
+++ b/data_visualization/README.md
@@ -0,0 +1,65 @@
+# Data Visualization – Experiment 31
+
+## Zweck
+Diese Webanwendung dient der interaktiven Visualisierung und Analyse der Testergebnisse aus *Experiment 31*. Ziel ist es, die Auswirkungen paralleler Verarbeitung auf Bandbreite und Reaktionszeit zu verstehen. Nutzer können verschiedene Laufparameter auswählen und Trends zwischen Baseline und aktuellen Läufen vergleichen.
+
+## Hauptfunktionen
+- **Interaktive Diagramme** zur Darstellung von Bandbreite, Reaktionszeit und weiteren Metriken
+- **Datenabruf über die API** `/results` (GET): dynamische Abfrage experimenteller Daten
+- **Filterfunktionen** zur Einschränkung auf spezifische Parameter (z. B. Parallelität)
+- **Responsive Ansicht** für Desktop- und mobile Endgeräte
+- **Trendanalyse und Metrikvergleich**, u. a. für `retry_tail_p99`
+
+## Datenfluss
+1. Beim Laden der Anwendung ruft das JavaScript-Modul (`js/app.js`) die API `/results` per **GET** auf.
+2. Die API liefert ein JSON-Array der Form:
+   ```json
+   [
+     {
+       "run_id": "string",
+       "parallelism": number,
+       "band_width": number,
+       "retry_tail_p99": number,
+       "timestamp": "ISO-String"
+     }
+   ]
+   ```
+3. Die Daten werden verarbeitet und an die Diagrammkomponenten übergeben.
+4. Änderungen der Filter führen zu erneuten API-Anfragen und Aktualisierung der Diagramme.
+
+## Verzeichnisstruktur
+```
+project-root/
+│
+├── index.html               # Einstiegspunkt der Web-Oberfläche
+├── css/
+│   └── style.css            # Zentrales Stylesheet
+├── js/
+│   ├── api.js              # Schnittstelle zur API /results
+│   ├── charts.js           # Logik zur Diagramm-Visualisierung
+│   └── app.js              # Steuerung und Initialisierung der Anwendung
+└── README.md               # Diese Dokumentation
+```
+
+## API-Anbindung
+- **Route:** `/results`
+- **Methode:** `GET`
+- **Optionale Parameter:**
+  - `run_id`
+  - Filter nach Parallelität oder Zeitraum
+- **Verwendung in:** `js/api.js`, `js/app.js`
+- **Funktion:** Liefert experimentelle Messwerte für Diagrammaufbau
+
+## Nutzung der Diagramme
+1. Öffne `index.html` im Browser.
+2. Wähle Filterparameter wie Parallelität oder Zeitraum.
+3. Die Diagramme aktualisieren sich automatisch.
+4. Über die Visualisierungen lassen sich Trends und Unterschiede zu Baseline-Läufen analysieren.
+
+## Responsiveness & Barrierefreiheit
+- Layout basiert auf **mobile-first**-Prinzip.
+- Diagramme passen sich flexibel an Bildschirmgrößen an.
+- **ARIA-Attribute** sichern Zugänglichkeit interaktiver Elemente.
+
+## Copyright
+© 2026 Donau2Space.de
\ No newline at end of file