# 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