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

Beim Laden ruft das Frontend Messdaten über GET /data ab.

Die Daten bestehen aus einem JSON-Array von Messobjekten mit Feldern:

{
  "timestamp": "YYYY-MM-DDTHH:mm:ssZ",
  "intensity": <Number>,
  "wavelength": <Number>,
  "sensor_id": <String>
}

Nach Empfang werden die Daten im Browser verarbeitet (Filterung, Transformation und Visualisierung).
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:

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

3.7 KiB Raw Blame History Unescape Escape