run_31_analysis/data_visualization
2026-03-23 11:13:27 +00:00
..
css Add data_visualization/css/theme.css 2026-03-23 11:13:25 +00:00
js Add data_visualization/js/chart.js 2026-03-23 11:13:26 +00:00
index.html Add data_visualization/index.html 2026-03-23 11:13:24 +00:00
README.md Add data_visualization/README.md 2026-03-23 11:13:27 +00:00

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

© 2026 Donau2Space.de