# 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