Add data_visualization/README.md

data_visualization/README.md

@@ -0,0 +1,109 @@
+# Data Visualization – Lichtsichtbarkeit ohne Streumittel
+
+## Überblick
+Diese Webanwendung visualisiert und analysiert Sensordaten aus dem Experiment **„Lichtsichtbarkeit ohne Streumittel“**. Ziel ist es, zeitabhängige Intensitätswerte verschiedener Logger visuell und interaktiv darzustellen, um insbesondere Anomalien oder signifikante Intensitätsänderungen zu erkennen.
+
+---
+
+## Ziel und Funktionsumfang
+**Ziel der Anwendung:**
+- Unterstützung der wissenschaftlichen Auswertung von Logger-Daten.
+- Bereitstellung einer intuitiven Weboberfläche zur Filterung und Untersuchung der Messverläufe.
+
+**Kernfunktionen:**
+- Anzeige der Intensitätswerte in Diagrammen über die Zeit.
+- Datenabruf per API-Route `/data` (GET).
+- Filterung nach Sensor-ID und Zeitfenster.
+- Interaktion mit Diagrammen: Hervorhebung von Peaks, Markierung von Anomalien.
+- Responsives Layout mit klarer Trennung zwischen Steuerung und Darstellung.
+
+---
+
+## Architekturüberblick
+Die Anwendung ist vollständig clientseitig aufgebaut und folgt dem MVC-ähnlichen Prinzip:
+
+| Ebene           | Beschreibung |
+|------------------|---------------|
+| **UI (View)**    | HTML/CSS-Komponenten zur Darstellung von Diagrammen und Steuerelementen. |
+| **Logic (Controller)** | JavaScript-Module zur Interaktion, Filterlogik und Visualisierung. |
+| **Data (Model)** | Lädt Messdaten über die definierte API `/data` (GET) und speichert sie im Browser-Speicher. |
+
+---
+
+## Datenfluss
+1. Beim Laden ruft das Frontend Messdaten über `GET /data` ab.
+2. Die Daten bestehen aus einem JSON-Array von Messobjekten mit Feldern:
+   ```json
+   {
+     "timestamp": "YYYY-MM-DDTHH:mm:ssZ",
+     "intensity": <Number>,
+     "wavelength": <Number>,
+     "sensor_id": <String>
+   }
+   ```
+3. Nach Empfang werden die Daten im Browser verarbeitet (Filterung, Transformation und Visualisierung).
+4. Diagramme aktualisieren sich dynamisch, sobald Nutzer Filter oder Zeiträume ändern.
+
+---
+
+## API-Dokumentation
+### Route: `/data`
+- **Methode:** GET
+- **Zweck:** Liefert Sensordaten zur Darstellung und Analyse.
+- **Optionale Parameter:**
+  - `log_file_path`: Pfad oder Identifier einer spezifischen Datei oder Messreihe.
+- **Antwort:** JSON-Array von Messobjekten mit Zeitstempel, Intensität, Wellenlänge und Sensor-ID.
+
+Beispielaufruf:
+```
+GET /data?log_file_path=session_01.json
+```
+Beispielantwort:
+```json
+[
+  {"timestamp": "2026-02-12T13:00:00Z", "intensity": 0.83, "wavelength": 532, "sensor_id": "S01"},
+  {"timestamp": "2026-02-12T13:00:10Z", "intensity": 0.79, "wavelength": 532, "sensor_id": "S01"}
+]
+```
+
+---
+
+## Ordnerstruktur
+```
+/ (Projektwurzel)
+├── index.html
+├── css/
+│   └── style.css
+├── js/
+│   ├── app.js          # Initialisierung und UI-Management
+│   ├── api.js          # Datenabruf /data
+│   ├── chart.js        # Diagramm-Rendering und Interaktion
+│   └── filters.js      # Filterlogik für Zeiträume und Sensoren
+└── README.md           # Dokumentation
+```
+
+---
+
+## Nutzerinteraktion
+- Auswahl bestimmter Sensoren erfolgt über Dropdown oder Checkbox.
+- Zeiträume können durch Eingabe oder Slider definiert werden.
+- Hover-Events auf Diagrammelementen zeigen Werte und Anomalie-Hinweise.
+
+---
+
+## Entwicklung und Erweiterung
+**Basis-Technologien:** HTML5, CSS3, JavaScript (ES6+).
+
+**Modularität:**
+- Jedes Modul (z. B. `api.js`, `chart.js`) ist unabhängig testbar.
+- Neue Sensorparameter oder Darstellungsformen (z. B. Spektralvergleiche) können leicht ergänzt werden.
+
+**Erweiterungsideen:**
+- Exportfunktionen für CSV oder PNG.
+- Erweiterte Statistikfunktionen (Mittelwerte, Standardabweichungen).
+- Live-Daten-Modus über WebSocket.
+
+---
+
+## Lizenz und Copyright
+© 2026 Donau2Space.de