From 4fab9f723ddd0cae717d8e661cbe01cd19d5184b Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 29 Mar 2026 03:07:26 +0000 Subject: [PATCH] Add data_visualization/README.md --- data_visualization/README.md | 109 +++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 data_visualization/README.md diff --git a/data_visualization/README.md b/data_visualization/README.md new file mode 100644 index 0000000..79fb328 --- /dev/null +++ b/data_visualization/README.md @@ -0,0 +1,109 @@ +# 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": , + "wavelength": , + "sensor_id": + } + ``` +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 \ No newline at end of file