Add data_visualization/README.md

data_visualization/README.md

@@ -0,0 +1,64 @@
+# Data Visualization – City Breathing Measurements
+
+## Zweck
+Diese Webanwendung dient der **Visualisierung von nächtlichen Mikroklima-Daten** wie Temperatur, Luftfeuchtigkeit und Lichtintensität. Ziel ist es, Anwender:innen eine interaktive, filterbare Darstellung dieser Umweltdaten zu bieten, um urbane Mikroklima-Phänomene besser zu verstehen.
+
+## Hauptfunktionen
+- **Abruf und Anzeige von Sensordaten** über die `/data`-API
+- **Interaktive Diagramme** für Temperatur, Feuchtigkeit und Lichtintensität
+- **Zeitraum-Filterung**, um spezifische Stunden oder Nächte zu analysieren
+- **Darstellung von Durchschnittswerten** und Messpunkten pro Sensorposition
+- **Tooltips & Hover-Interaktion** für Messdetails
+- **Responsive Oberfläche** – Anzeigetreue auf Desktop und Mobile gewährleistet
+
+## Datenfluss
+1. Die Anwendung ruft Messwerte über die Route `/data` (GET) ab.
+2. Die Daten werden clientseitig zwischengespeichert und analysiert.
+3. Mit **Chart.js** werden die Messreihen visualisiert.
+4. Bei Änderungen des Zeitfilters werden die entsprechenden Diagramme live aktualisiert.
+
+**Erwartetes Datenformat:**
+```json
+[
+  {
+    "timestamp": "2026-08-22T01:30:00Z",
+    "location_id": "north_square",
+    "temperature": 19.3,
+    "humidity": 82,
+    "light": 15
+  }
+]
+```
+
+## Technologie-Stack
+- **Frontend:** HTML5, CSS3 (BEM-Struktur), Vanilla JavaScript (ES6+)
+- **Visualisierung:** Chart.js
+- **API-Kommunikation:** Fetch API (asynchron)
+
+## Ordnerstruktur
+```
+/
+├── index.html              # Einstiegspunkt der App
+├── css/
+│   ├── styles.css          # Haupt-Layout & Komponenten
+│   └── responsive.css      # Anpassungen für verschiedene Geräte
+├── js/
+│   ├── app.js              # Initialisierung & Steuerung der UI
+│   ├── api.js              # Fetch-Aufrufe zur /data-Route
+│   ├── charts.js           # Chart.js-Setup & Diagrammaktualisierung
+│   └── filters.js          # Zeitfilterlogik
+└── README.md               # Projektdokumentation
+```
+
+## Nutzung
+1. Projektdateien lokal oder auf einem Webserver bereitstellen.
+2. Sicherstellen, dass `/data` erreichbar ist oder durch eine lokale JSON-Datei repräsentiert wird.
+3. Browser öffnen und `index.html` aufrufen.
+4. Über das Dashboard können Zeiträume gewählt und Daten interaktiv erkundet werden.
+
+## Hinweise zur Erweiterung
+- Weitere Sensorarten können durch Anpassung der JSON-Struktur und Ergänzung neuer Diagrammtypen integriert werden.
+- Wenn zusätzliche API-Routen verwendet werden, sollte deren Format in der README gepflegt werden.
+
+---
+© 2026 Donau2Space.de