# Data Visualization für Replikationsanalyse – Experiment 31b

## Übersicht
Diese Webanwendung visualisiert und analysiert die Replikationsdaten des Experiments **31b**. Hauptziel ist es, Performance-Trends und Engpässe zu erkennen, indem **Bandbreite** und **retry_tailp99** interaktiv gegenüberstellt werden.

## Hauptfunktionen
- **Interaktive Darstellung** der Replikationsläufe in dynamischen Diagrammen.
- **Vergleich** zwischen Runs, um Änderungen in Bandbreite und retry_tailp99 zu erkennen.
- **Filter** nach Segmenttypen: `pinned`, `unpinned`, `near-expiry`.
- **Zeitbasierte Analyse** der Metriken und Verlaufstrends.
- **Erkennung von Ausreißern** oder Anomalien mittels visueller Hervorhebung.
- **Responsives Dashboard**, optimiert für Desktop und Mobile.

## Datenfluss
1. Die Anwendung ruft Replikationsdaten über den API-Endpunkt `/run-data` ab.
2. Modul **api.js**: Verarbeitet den Request (`GET /run-data?run_id=<id>`) und gibt die JSON-Daten zurück.
3. Modul **visualization.js**: Stellt Metriken grafisch dar und synchronisiert die Visualisierung mit Filtereingaben.
4. UI-Komponenten aktualisieren den DOM in Echtzeit, sobald neue Daten geladen werden.

## API-Referenz
**Endpunkt:** `/run-data`

- **Methode:** GET
- **Parameter:** `run_id`
- **Antwort:**
  ```json
  {
    "run_id": "string",
    "metrics": {
      "bandwidth": [ ... ],
      "retry_tailp99": [ ... ]
    },
    "segments": [ ... ]
  }
  ```
- **Verwendung:** Wird im Modul `js/api.js` aufgerufen, um Daten an `js/visualization.js` weiterzugeben.

## Ordnerstruktur
```
project_root/
├── index.html
├── css/
│   └── styles.css
├── js/
│   ├── api.js
│   ├── visualization.js
│   └── ui.js
└── README.md
```

## Verwendung
1. **Setup:** Projektdateien auf einen Webserver oder lokalen Entwicklungsserver legen.
2. **Start:** `index.html` im Browser öffnen.
3. **Interaktion:**
   - Run-ID im Interface auswählen.
   - Daten werden automatisch über `/run-data` abgerufen.
   - Diagramme, Tabellen und Filter reagieren dynamisch.

## Technische Hinweise
- **Keine externen Ressourcen** (Bilder, Icons, Fonts) werden genutzt.
- **Moderne JS-Features (ES6+)** werden in allen Modulen eingesetzt.
- Das Dashboard ist **barrierearm** und **responsiv** aufgebaut.

## Copyright
© 2026 Donau2Space.de