# Kiesel-Atmung Experiment – Datenvisualisierung

## Zweck
Diese Webanwendung dient der **Visualisierung und Analyse von Temperatur- und Audiodaten** aus dem Kiesel-Atmungsexperiment. Ziel ist es, nächtliche Temperaturpulse und akustische Muster von Kieseln zu identifizieren und im zeitlichen Verlauf zu untersuchen.

## Hauptfunktionen
- **Zeitreihen-Diagramme** für Temperatur und Audiointensität
- **Synchronisierte Darstellung** beider Messreihen
- **Filtermöglichkeiten** nach Messpunkten und Zeiträumen
- **Interaktive Diagramme** mit Tooltip- und Zoom-Funktionalität
- **Automatisches Nachladen** aktueller Messdaten über die API

## Datenfluss
1. **App-Initialisierung:** Die Anwendung lädt beim Start bestehende Messdaten über die Route `/data`.
2. **Verarbeitung:** Das Modul `dataHandler` parsed die JSON-Daten und strukturiert sie für die Darstellung.
3. **Visualisierung:** `visualization.js` rendert Temperatur- und Audiodiagramme synchronisiert.
4. **Interaktive Steuerung:** Nutzer können Zeitbereiche und Sensorarten filtern. Das UI reagiert in Echtzeit.
5. **Datenaktualisierung:** Per periodischem Fetch oder Nutzerinteraktion werden neue Werte automatisch geladen.

## API
**Route:** `/data`

- **Methode:** GET  
- **Parameter:**  
  - `sensorType` *(optional)* – z. B. `temperature` oder `audio`  
  - `timeRange` *(optional)* – Zeitintervall als String (z. B. `last_24h`)
- **Antwortformat:**  
  ```json
  {
    "temperature": [ { "time": "<ISO-Date>", "value": <number> } ],
    "audio": [ { "time": "<ISO-Date>", "amplitude": <number> } ]
  }
  ```

## Projektstruktur
```
.
├── index.html              # Einstiegspunkt der Webanwendung
├── css/
│   ├── style.css           # Hauptlayout und Komponenten-Styling
├── js/
│   ├── app.js              # Initialisierung und Data-Binding
│   ├── dataHandler.js      # Verarbeitung der Messdaten
│   ├── visualization.js    # Rendering der Diagramme
│   ├── api.js              # Kommunikation mit /data API
└── README.md               # Projektdokumentation
```

## Entwicklungs- und Nutzungsrichtlinien
- **Keine Bilddateien oder Logos:** Alle Darstellungen erfolgen rein datenbasiert.
- **Semantisches HTML:** Fokus auf strukturierte, zugängliche Darstellung.
- **Responsives Design:** Unterstützung mobiler und Desktop-Ansichten mit Fluid-Layout.
- **Barrierefreiheit:** Nutzung von ARIA-Attributen und deutlichen Farbkontrasten.

## Lizenz & Copyright
© 2026 Donau2Space.de