Add data_visualization/README.md

data_visualization/README.md

@@ -0,0 +1,120 @@
+# Datenvisualisierung für Langzeitbelichtungs-Experimente
+
+## Überblick
+Diese Webanwendung visualisiert Umweltdaten (Temperatur, Windgeschwindigkeit, Luftfeuchtigkeit) und analysierte Bilddaten aus Langzeitbelichtungs-Experimenten. Sie ermöglicht Wissenschaftlern und Technikern die Untersuchung von Trends, Korrelationen und Bildanalysen über Zeitintervalle hinweg.
+
+## Ziel
+- Darstellung von Echtzeit- und historischen Umweltdaten
+- Interaktive Diagramme zur Trendanalyse
+- Bildgalerie mit Zoomfunktion zur Darstellung analysierter Bilddaten
+- Filterfunktionen nach Zeitintervallen und Sensoren
+- Responsives Design für Desktop und Mobilgeräte
+- Automatische Datenaktualisierung über die bereitgestellte API
+
+## Architekturübersicht
+### Datenfluss
+1. Das Frontend fordert Messdaten und Bildinformationen über die API-Endpunkte `/data` und `/images` an.
+2. Die Daten werden im JS aufbereitet und in Diagrammen und Galerien visualisiert.
+3. Nutzerinteraktionen (Filtern, Zeitraumwahl) lösen erneute API-Requests aus.
+4. Die UI aktualisiert sich dynamisch mit den neuen Daten.
+
+### Ordnerstruktur
+```
+root/
+├── index.html
+├── css/
+│   ├── styles.css
+│   └── responsive.css
+├── js/
+│   ├── api.js
+│   ├── app.js
+│   ├── ui.js
+│   └── charts.js
+├── README.md
+└── assets/ (optional, keine Bilddateien innerhalb des Projekts)
+```
+
+## Setup & Installation
+### Voraussetzungen
+- Node.js (empfohlen Version ≥ 18)
+- Moderner Browser mit ECMAScript 2020+ Unterstützung
+
+### Lokaler Start
+```bash
+git clone <repository-url>
+cd data_visualization
+npm install
+npx serve .
+```
+Danach im Browser `http://localhost:5000` öffnen.
+
+## API-Übersicht
+### **GET /data**
+**Beschreibung:** Liefert JSON mit Messwerten der Umweltsensoren.
+
+**Optionale Parameter:**
+- `time_range`: Zeitraumfilter (`YYYY-MM-DD,YYYY-MM-DD`)
+- `sensor_id`: Filter nach spezifischem Sensor
+
+**Beispielantwort:**
+```json
+[
+  {
+    "timestamp": "2026-03-05T12:00:00Z",
+    "temperature": 24.3,
+    "wind_speed": 3.6,
+    "humidity": 45.2
+  }
+]
+```
+
+### **GET /images**
+**Beschreibung:** Liefert Metadaten zu analysierten Langzeitbelichtungsbildern.
+
+**Optionale Parameter:**
+- `start_time`, `end_time`: Zeitfilter
+
+**Beispielantwort:**
+```json
+[
+  {
+    "url": "/images/2026_03_05_12_00_processed.png",
+    "capture_time": "2026-03-05T12:00:00Z",
+    "analysis_result": {
+      "exposure": 15.2,
+      "detail_level": "medium"
+    }
+  }
+]
+```
+
+## Dateirollen
+| Datei | Beschreibung |
+| ------ | ------------- |
+| `index.html` | Einstiegspunkt der Anwendung, lädt alle Komponenten |
+| `css/styles.css` | Grundlegendes Layout, Farben, Abstände |
+| `css/responsive.css` | Media Queries und responsive Anpassungen |
+| `js/api.js` | Schnittstelle zur Backend-API, kümmert sich um Fetches |
+| `js/app.js` | Zentrale Steuerung der Anwendung, orchestriert Datenabruf und UI-Updating |
+| `js/ui.js` | Rendering und DOM-Interaktionen (Galerie, Diagramme, Filter) |
+| `js/charts.js` | Erstellung und Aktualisierung interaktiver Diagramme |
+| `README.md` | Dieses Dokument: Erklärung, Setup, Architektur |
+
+## Nutzung
+1. APP starten und gewünschtes Zeitintervall im Filter wählen.
+2. Diagramme zeigen Trends der Umweltdaten an.
+3. Galerie erlaubt die Untersuchung der verarbeiteten Bilddaten.
+4. System aktualisiert periodisch Live-Daten automatisch.
+
+## Barrierefreiheit & Responsivität
+- HTML-Struktur folgt semantischen Standards (`<main>`, `<section>`, `<header>`, `<footer>`)
+- ARIA-Attribute unterstützen Screenreader
+- Mobile-First CSS Design
+
+## Sicherheit & Datenschutz
+- API-Kommunikation nur über HTTPS
+- Keine Speicherung personenbezogener Daten
+- CSRF- & XSS-Schutz in geplanten PHP-Komponenten berücksichtigt
+
+## Lizenz & Copyright
+© 2026 Donau2Space.de