Kiesel-Atmung Experiment – Datenvisualisierung

Zweck

Diese Webanwendung dient der Visualisierung und Analyse von Temperatur- und Audiodaten aus dem Kiesel-Atmungsexperiment. Ziel ist es, nächtliche Temperaturpulse und akustische Muster von Kieseln zu identifizieren und im zeitlichen Verlauf zu untersuchen.

Hauptfunktionen

Zeitreihen-Diagramme für Temperatur und Audiointensität
Synchronisierte Darstellung beider Messreihen
Filtermöglichkeiten nach Messpunkten und Zeiträumen
Interaktive Diagramme mit Tooltip- und Zoom-Funktionalität
Automatisches Nachladen aktueller Messdaten über die API

Datenfluss

App-Initialisierung: Die Anwendung lädt beim Start bestehende Messdaten über die Route /data.
Verarbeitung: Das Modul dataHandler parsed die JSON-Daten und strukturiert sie für die Darstellung.
Visualisierung: visualization.js rendert Temperatur- und Audiodiagramme synchronisiert.
Interaktive Steuerung: Nutzer können Zeitbereiche und Sensorarten filtern. Das UI reagiert in Echtzeit.
Datenaktualisierung: Per periodischem Fetch oder Nutzerinteraktion werden neue Werte automatisch geladen.

API

Route: /data

Methode: GET
Parameter:
- sensorType (optional) – z. B. temperature oder audio
- timeRange (optional) – Zeitintervall als String (z. B. last_24h)

Antwortformat:

{
  "temperature": [ { "time": "<ISO-Date>", "value": <number> } ],
  "audio": [ { "time": "<ISO-Date>", "amplitude": <number> } ]
}

Projektstruktur

.
├── index.html              # Einstiegspunkt der Webanwendung
├── css/
│   ├── style.css           # Hauptlayout und Komponenten-Styling
├── js/
│   ├── app.js              # Initialisierung und Data-Binding
│   ├── dataHandler.js      # Verarbeitung der Messdaten
│   ├── visualization.js    # Rendering der Diagramme
│   ├── api.js              # Kommunikation mit /data API
└── README.md               # Projektdokumentation

Entwicklungs- und Nutzungsrichtlinien

Keine Bilddateien oder Logos: Alle Darstellungen erfolgen rein datenbasiert.
Semantisches HTML: Fokus auf strukturierte, zugängliche Darstellung.
Responsives Design: Unterstützung mobiler und Desktop-Ansichten mit Fluid-Layout.
Barrierefreiheit: Nutzung von ARIA-Attributen und deutlichen Farbkontrasten.

2.5 KiB Raw Permalink Blame History Unescape Escape