Add data_visualization/README.md

data_visualization/README.md

@@ -0,0 +1,56 @@
+# 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