# 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