birthday_experiment_runs/experiment_results_visualization

Experiment Results Visualization

Zweck

Dieses Modul stellt ein webbasiertes Dashboard bereit, mit dem die Ergebnisse von Experiment-Runs analysiert und verglichen werden können. Besonderes Augenmerk liegt auf der Gegenüberstellung sogenannter 'pinned' und 'unpinned' Runs, um Performance- und Stabilitätsunterschiede sichtbar zu machen.

Hauptfunktionen

• Visualisierung der pinned vs unpinned Resultate in interaktiven Diagrammen
• Dynamische Filterung und Auswahl einzelner Runs
• Anzeige statistischer Kennzahlen (p95, p99, Korrelationen)
• Vergleichsansicht mit wählbarem kompakten oder breitem Layout
• Automatische Aktualisierung durch regelmäßige API-Abfragen
• Responsive Darstellung für Desktop und Tablet

Datenfluss & Architektur

1. API-Aufruf: Das Frontend lädt die Datensätze über den Endpunkt /results (GET-Anfrage).
2. Verarbeitung: Die empfangenen JSON-Daten enthalten Arrays für pinned und unpinned Runs.
3. Darstellung: JavaScript-Module analysieren die Werte, berechnen Statistiken und visualisieren diese in Diagrammen.
4. Interaktion: Nutzer können einzelne Runs filtern, wodurch das Dashboard und die Visualisierungen dynamisch aktualisiert werden.

API-Integration

Endpunkt: /results
Methode: GET
Erwartete Antwort:

{
  "pinned": [ ... ],
  "unpinned": [ ... ]
}

Verwendung in: js/api.js
Zweck: Lädt alle Resultate der Experiment-Runs zur Darstellung.

Ordnerstruktur

experiment_results_visualization/
│
├── index.html               # Einstiegspunkt des Dashboards
├── css/
│   ├── base.css             # Grundlayout und Variablen
│   ├── components.css       # Diagramm- und Tabellenstile
│   └── responsive.css       # Anpassungen für verschiedene Viewports
│
├── js/
│   ├── api.js               # Lädt Ergebnisse von der API /results
│   ├── charts.js            # Darstellung von Diagrammen für pinned/unpinned Daten
│   ├── filters.js           # UI-Logik für Filter und Run-Auswahl
│   └── stats.js             # Berechnung von Kennzahlen (p95/p99, Korrelationen)
│
└── README.md                # Projektdokumentation

Technische Hinweise

• Die Anwendung ist vollständig clientseitig aufgebaut und nutzt native ES6-Module.
• Alle Requests an die API erfolgen asynchron (async/await, fetch).
• Keine externen Bibliotheken oder Assets erforderlich.
• Anpassung an unterschiedliche Bildschirmgrößen ist Teil des Kernlayouts.

Copyright

© 2026 Donau2Space.de