Add spike_visualizer/README.md

spike_visualizer/README.md

@@ -0,0 +1,71 @@
+# Spike Visualizer
+
+## Übersicht
+Der **Spike Visualizer** ist eine Weboberfläche zur interaktiven Analyse von CPU-Spikes, die aus Scheduler-Events und CPU-Migrationen abgeleitet wurden. Ziel ist es, Muster und Ausreißer in den Spike-Daten grafisch zu erkennen und mit Metriken wie *reorder_score* und *publish_rate* zu untersuchen.
+
+## Ziel
+Darstellung und Exploration klassifizierter CPU-Spikes durch eine interaktive Zeitleiste. Benutzer können Filter anwenden, Metriken untersuchen und Migrationen sichtbar machen, um Systemverhalten im Zeitverlauf zu verstehen.
+
+## Kernfunktionen
+- Interaktive Zeitleiste mit CPU-Spikes
+- Filtermöglichkeiten nach CPU-ID, reorder_score und Zeitfenster
+- Tooltip mit Eventdetails (publish_rate, reorder_score)
+- Optionale Einblendung von Migrationen und Eventtypen
+- Dynamisches Nachladen der Spike-Daten via API (`/api/spikes`)
+- Zusammenfassung der wichtigsten Metriken oberhalb der Grafik
+- Responsives Layout mit anpassbarer Diagrammansicht
+
+## Datenfluss
+1. Beim Laden der Seite ruft das Frontend per `GET /api/spikes` Spike-Daten als JSON ab.
+2. Die Daten werden clientseitig nach CPU, Zeit und reorder_score gefiltert.
+3. D3.js visualisiert die Daten als Timeline oder Scatterplot.
+4. Benutzerinteraktionen (Filteränderung, Mouseover) aktualisieren Diagramm und Metriken in Echtzeit.
+
+## API-Nutzung
+### Route: `/api/spikes`
+- **Methode:** `GET`
+- **Zweck:** Abrufen der klassifizierten CPU-Spike-Daten
+- **Optionale Parameter:**
+  - `cpu_id`
+  - `start_time`
+  - `end_time`
+- **Erwartete Antwort:**
+  ```json
+  [
+    {
+      "id": 12,
+      "cpu_id": 0,
+      "timestamp": 1738393200,
+      "reorder_score": 0.86,
+      "publish_rate": 52.7,
+      "migration_flag": true
+    }
+  ]
+  ```
+
+## Ordnerstruktur
+```
+spike_visualizer/
+│
+├── index.html              # Einstiegspunkt der Web-App
+├── css/
+│   └── style.css           # Layout und Farbdefinition
+├── js/
+│   ├── app.js              # Initialisierung und Visualisierung
+│   ├── api.js              # Schnittstelle zu /api/spikes
+│   └── filters.js          # Filterlogik und UI-Events
+└── README.md               # Diese Dokumentation
+```
+
+## Nutzung
+1. Projektverzeichnis aufrufen und lokalen Webserver starten.
+2. Browser öffnen und `index.html` laden.
+3. Daten werden automatisch über `/api/spikes` geladen.
+4. Filter und Interaktionen nutzen, um die Visualisierung anzupassen.
+
+## Anforderungen
+- Moderner Browser mit aktiviertem JavaScript
+- Zugriff auf eine API-Instanz, die `/api/spikes` bereitstellt
+
+## Lizenz und Hinweise
+© 2026 Donau2Space.de