city_breathing_measurements/data_visualization

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:

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