109 lines
No EOL
3.7 KiB
Markdown
109 lines
No EOL
3.7 KiB
Markdown
# Data Visualization – Lichtsichtbarkeit ohne Streumittel
|
||
|
||
## Überblick
|
||
Diese Webanwendung visualisiert und analysiert Sensordaten aus dem Experiment **„Lichtsichtbarkeit ohne Streumittel“**. Ziel ist es, zeitabhängige Intensitätswerte verschiedener Logger visuell und interaktiv darzustellen, um insbesondere Anomalien oder signifikante Intensitätsänderungen zu erkennen.
|
||
|
||
---
|
||
|
||
## Ziel und Funktionsumfang
|
||
**Ziel der Anwendung:**
|
||
- Unterstützung der wissenschaftlichen Auswertung von Logger-Daten.
|
||
- Bereitstellung einer intuitiven Weboberfläche zur Filterung und Untersuchung der Messverläufe.
|
||
|
||
**Kernfunktionen:**
|
||
- Anzeige der Intensitätswerte in Diagrammen über die Zeit.
|
||
- Datenabruf per API-Route `/data` (GET).
|
||
- Filterung nach Sensor-ID und Zeitfenster.
|
||
- Interaktion mit Diagrammen: Hervorhebung von Peaks, Markierung von Anomalien.
|
||
- Responsives Layout mit klarer Trennung zwischen Steuerung und Darstellung.
|
||
|
||
---
|
||
|
||
## Architekturüberblick
|
||
Die Anwendung ist vollständig clientseitig aufgebaut und folgt dem MVC-ähnlichen Prinzip:
|
||
|
||
| Ebene | Beschreibung |
|
||
|------------------|---------------|
|
||
| **UI (View)** | HTML/CSS-Komponenten zur Darstellung von Diagrammen und Steuerelementen. |
|
||
| **Logic (Controller)** | JavaScript-Module zur Interaktion, Filterlogik und Visualisierung. |
|
||
| **Data (Model)** | Lädt Messdaten über die definierte API `/data` (GET) und speichert sie im Browser-Speicher. |
|
||
|
||
---
|
||
|
||
## Datenfluss
|
||
1. Beim Laden ruft das Frontend Messdaten über `GET /data` ab.
|
||
2. Die Daten bestehen aus einem JSON-Array von Messobjekten mit Feldern:
|
||
```json
|
||
{
|
||
"timestamp": "YYYY-MM-DDTHH:mm:ssZ",
|
||
"intensity": <Number>,
|
||
"wavelength": <Number>,
|
||
"sensor_id": <String>
|
||
}
|
||
```
|
||
3. Nach Empfang werden die Daten im Browser verarbeitet (Filterung, Transformation und Visualisierung).
|
||
4. Diagramme aktualisieren sich dynamisch, sobald Nutzer Filter oder Zeiträume ändern.
|
||
|
||
---
|
||
|
||
## API-Dokumentation
|
||
### Route: `/data`
|
||
- **Methode:** GET
|
||
- **Zweck:** Liefert Sensordaten zur Darstellung und Analyse.
|
||
- **Optionale Parameter:**
|
||
- `log_file_path`: Pfad oder Identifier einer spezifischen Datei oder Messreihe.
|
||
- **Antwort:** JSON-Array von Messobjekten mit Zeitstempel, Intensität, Wellenlänge und Sensor-ID.
|
||
|
||
Beispielaufruf:
|
||
```
|
||
GET /data?log_file_path=session_01.json
|
||
```
|
||
Beispielantwort:
|
||
```json
|
||
[
|
||
{"timestamp": "2026-02-12T13:00:00Z", "intensity": 0.83, "wavelength": 532, "sensor_id": "S01"},
|
||
{"timestamp": "2026-02-12T13:00:10Z", "intensity": 0.79, "wavelength": 532, "sensor_id": "S01"}
|
||
]
|
||
```
|
||
|
||
---
|
||
|
||
## Ordnerstruktur
|
||
```
|
||
/ (Projektwurzel)
|
||
├── index.html
|
||
├── css/
|
||
│ └── style.css
|
||
├── js/
|
||
│ ├── app.js # Initialisierung und UI-Management
|
||
│ ├── api.js # Datenabruf /data
|
||
│ ├── chart.js # Diagramm-Rendering und Interaktion
|
||
│ └── filters.js # Filterlogik für Zeiträume und Sensoren
|
||
└── README.md # Dokumentation
|
||
```
|
||
|
||
---
|
||
|
||
## Nutzerinteraktion
|
||
- Auswahl bestimmter Sensoren erfolgt über Dropdown oder Checkbox.
|
||
- Zeiträume können durch Eingabe oder Slider definiert werden.
|
||
- Hover-Events auf Diagrammelementen zeigen Werte und Anomalie-Hinweise.
|
||
|
||
---
|
||
|
||
## Entwicklung und Erweiterung
|
||
**Basis-Technologien:** HTML5, CSS3, JavaScript (ES6+).
|
||
|
||
**Modularität:**
|
||
- Jedes Modul (z. B. `api.js`, `chart.js`) ist unabhängig testbar.
|
||
- Neue Sensorparameter oder Darstellungsformen (z. B. Spektralvergleiche) können leicht ergänzt werden.
|
||
|
||
**Erweiterungsideen:**
|
||
- Exportfunktionen für CSV oder PNG.
|
||
- Erweiterte Statistikfunktionen (Mittelwerte, Standardabweichungen).
|
||
- Live-Daten-Modus über WebSocket.
|
||
|
||
---
|
||
|
||
## Lizenz und Copyright
|
||
© 2026 Donau2Space.de |