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

Die Anwendung ruft Messwerte über die Route /data (GET) ab.
Die Daten werden clientseitig zwischengespeichert und analysiert.
Mit Chart.js werden die Messreihen visualisiert.
Bei Änderungen des Zeitfilters werden die entsprechenden Diagramme live aktualisiert.

Erwartetes Datenformat:

[
  {
    "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

Projektdateien lokal oder auf einem Webserver bereitstellen.
Sicherstellen, dass /data erreichbar ist oder durch eine lokale JSON-Datei repräsentiert wird.
Browser öffnen und index.html aufrufen.
Ü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.

2.6 KiB Raw Blame History Unescape Escape