Add 2_interference_visualization/README.md

2_interference_visualization/README.md

@@ -0,0 +1,66 @@
+# Interferenz-Visualisierung – Web-Frontend
+
+## Ziel der Anwendung
+Dieses Web-Frontend dient der dynamischen Visualisierung und Analyse von Interferenzmessdaten, um die Optimierung von Pool-Isolationen nachvollziehbar zu machen. Es unterstützt die Untersuchung der Zusammenhänge zwischen Messläufen und Leistungsmetriken (z. B. Tail-Latenz, Bandbreite) und stellt Veränderungen visuell dar.
+
+## Hauptfunktionen
+- **Dynamische Interferenzkurve:** Darstellung der Metrikverläufe in Echtzeit.
+- **API-Datenanbindung:** Abruf von Messdaten über den Endpunkt `/visualization` (GET).
+- **Filterfunktionen:** Auswahl spezifischer Runs (z. B. 31b, 32, 33, 34) und zugehöriger Metriken.
+- **Visualisierung von Differenzen:** Gegenüberstellung von Tail-Latenz und Bandbreitenabweichungen.
+- **Tooltip-Interaktion:** Anzeige von Detailwerten bei Maus- oder Touch-Hover.
+- **Responsive Darstellung:** Automatische Anpassung der Diagrammgrößen an Desktop und Mobilgeräte.
+
+## Datenfluss und Architektur
+1. Beim Start wird die Anwendung initialisiert und ruft über die API `/visualization` die verfügbaren Messdaten ab.
+2. Die Antwort enthält strukturierte JSON-Daten in der Form:
+   ```json
+   {
+     "runs": ["31b", "32", "33", "34"],
+     "metrics": ["tail", "band_width"],
+     "data": [
+       {"run": "31b", "tail": 17, "band_width": -3},
+       {"run": "32", "tail": 19, "band_width": 2}
+     ]
+   }
+   ```
+3. Das JS-Modul verarbeitet diese Rohdaten und aktualisiert die Chart-Komponente.
+4. Benutzerinteraktionen (Filterauswahl oder Hover) führen zu einer dynamischen Aktualisierung der Grafik.
+
+## Technische Struktur
+```
+/project-root
+├─ index.html                # Basisaufbau der Anwendung
+├─ css/
+│  ├─ style.css              # Layout, Farben und responsive Design-Regeln
+├─ js/
+│  ├─ api.js                 # Anbindung an /visualization API, Fetch-Handler
+│  ├─ chart.js               # Rendering und Update der Diagramme
+│  ├─ app.js                 # Einstiegspunkt, orchestriert Datenfluss und UI
+├─ README.md                 # Dokumentation der Anwendung
+```
+
+## API-Verwendung
+**Endpunkt:** `/visualization`
+
+**Methode:** `GET`
+
+**Parameter:**
+- `run`: Filtert die Messdaten nach spezifischem Run.
+- `metric`: Gibt an, welche Metrik dargestellt werden soll (z. B. `tail`, `band_width`).
+
+**Zweck:** Liefert strukturierte Interferenz- und Leistungsdaten für die grafische Darstellung.
+
+## Nutzung
+1. Projekt im lokalen Webserver-Kontext starten.
+2. Browser öffnen und `index.html` aufrufen.
+3. Messlauf und Metrik auswählen.
+4. Diagramm aktualisiert sich automatisch entsprechend der API-Daten.
+
+## Responsiveness und Accessibility
+- Darstellung ist **mobile-first** gestaltet.
+- Farbkontraste und ARIA-Attribute sind beachtet.
+- Die interaktive Chart-Komponente unterstützt Eingaben per Maus und Touch.
+
+## Lizenz und Copyright
+© 2026 Donau2Space.de