65 lines
No EOL
2.5 KiB
Markdown
65 lines
No EOL
2.5 KiB
Markdown
# 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:
|
||
```json
|
||
[
|
||
{
|
||
"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.
|
||
|
||
## Copyright
|
||
© 2026 Donau2Space.de |