diff --git a/2_interference_visualization/README.md b/2_interference_visualization/README.md new file mode 100644 index 0000000..bb4913f --- /dev/null +++ b/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 \ No newline at end of file