56 lines
2.5 KiB
Markdown
56 lines
2.5 KiB
Markdown
# 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:**
|
||
```json
|
||
{
|
||
"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
|