resonanzband_analysis/data_visualization

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:

   {
     "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:

[
  {
    "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.