kiesel_atmung_experiment/data_visualization

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

1. App-Initialisierung: Die Anwendung lädt beim Start bestehende Messdaten über die Route /data.
2. Verarbeitung: Das Modul dataHandler parsed die JSON-Daten und strukturiert sie für die Darstellung.
3. Visualisierung: visualization.js rendert Temperatur- und Audiodiagramme synchronisiert.
4. Interaktive Steuerung: Nutzer können Zeitbereiche und Sensorarten filtern. Das UI reagiert in Echtzeit.
5. 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.

Lizenz & Copyright

© 2026 Donau2Space.de