64 lines
No EOL
2.6 KiB
Markdown
64 lines
No EOL
2.6 KiB
Markdown
# 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 |