diff --git a/data_visualization/README.md b/data_visualization/README.md new file mode 100644 index 0000000..840e587 --- /dev/null +++ b/data_visualization/README.md @@ -0,0 +1,85 @@ +# Resonanzband Analyse – Data Visualization + +## Überblick +Dieses Webinterface dient der interaktiven Visualisierung von Resonanzband-Analyseergebnissen und den Auswirkungen verschiedener Scheduling-Mechanismen. Nutzer können Metriken und Ausreißer grafisch untersuchen, Filter anwenden und dynamisch neue Ergebnisse laden. + +## Hauptfunktionen +- **Diagrammgestützte Darstellung** von Resonanzband-Metriken, einschließlich Ausreißern und Streuungen. +- **Dynamische Nachladung der Analyseergebnisse** über die API-Route `/results`. +- **Filterung** nach Laufnummern (`run_id`) und Parametern. +- **Interaktive Diagramme** mit Tooltip-Details zu Messpunkten. +- **Responsives Layout** mit getrennter Ansicht für Filter und Visualisierungen. + +## Datenfluss +1. Beim Laden der Seite wird die Anwendung initialisiert. +2. Über einen GET-Request an `/results` werden Analyseergebnisse abgerufen. +3. Die Datenstruktur enthält Felder: + ```json + { + "run_id": string, + "band_center": number, + "band_width_p10_p90": [number, number], + "max_outlier": number, + "overhead_ms": number + } + ``` +4. Die Daten werden clientseitig verarbeitet und in Diagrammkomponenten gerendert. +5. Filteränderungen führen zu neuen API-Aufrufen und aktualisieren die Visualisierung. + +## API-Nutzung +**Route:** `/results` + +**Methode:** `GET` + +**Optionale Parameter:** +- `run_id`: Filtert nach einer konkreten Laufnummer. +- `parameter_filter`: Filtert nach spezifischen Parametern der Analyse. + +**Antwort:** +Array von Objekten gemäß obigem Datenschema. + +Beispiel: +```json +[ + { + "run_id": "r0037", + "band_center": 102.4, + "band_width_p10_p90": [98.0, 106.8], + "max_outlier": 110.3, + "overhead_ms": 4.8 + } +] +``` + +## Architektur & Struktur +``` +root/ +├── index.html # Haupteinstiegspunkt der Anwendung +├── css/ +│ ├── layout.css # Styles für Layout, Responsiveness +│ └── components.css # Komponenten-spezifische Styles +├── js/ +│ ├── api.js # Kommunikation mit /results-Endpoint +│ ├── charts.js # Diagramm-Rendering & Interaktivität +│ └── app.js # Anwendungseintrittspunkt & Datenflusssteuerung +└── README.md # Projektbeschreibung, Nutzung und Hinweise +``` + +## Installation & Nutzung +1. Projektdateien in einen Webserver-Ordner legen (z. B. lokal via `http-server`). +2. Öffnen Sie `index.html` im Browser. +3. Daten werden automatisch über `/results` geladen. +4. Filter können über die Benutzeroberfläche eingestellt werden. + +## Entwicklungsumgebung +- **Frontend:** HTML5, CSS3 (BEM-Style, mobile-first), JavaScript (ES6+) +- **API:** JSON-basierte REST-Route `/results` +- **Kompatibilität:** Aktuelle Versionen von Chrome, Firefox, Edge + +## Barrierefreiheit +- ARIA-Labels für alle interaktiven Elemente +- Fokussteuerung über Tastatur möglich +- Farbkontraste geprüft nach WCAG-Standard + +## Lizenz & Copyright +© 2026 Donau2Space.de – Alle Rechte vorbehalten. \ No newline at end of file