Add data_visualization/README.md

data_visualization/README.md

@@ -0,0 +1,99 @@
+# Datenvisualisierung – Nachtfotografie ISS-Jagd
+
+## Überblick
+Diese Anwendung ist eine Weboberfläche zur **interaktiven Analyse und Visualisierung von Messdaten** aus dem Nachtfotografie-Experiment zur **Beobachtung der Internationalen Raumstation (ISS) im Nebel**.
+
+Ziel ist es, über eine einheitliche Benutzeroberfläche Messdaten dynamisch zu laden, visuell darzustellen und auf Basis von Filteroptionen auszuwerten.
+
+---
+
+## Hauptfunktionen
+- **Interaktive Diagramme** zur Anzeige von Temperatur, Luftfeuchtigkeit und Signalintensität
+- **Datenabruf** über die API-Route `/data`
+- **Filterfunktionen** nach Zeitintervallen und Belichtungsparametern
+- **Responsive Darstellung** für Desktop-, Tablet- und Mobilgeräte
+- **Hervorhebung der ISS-Phasen** auf dem Diagramm
+- **Live-Update** bei eintreffenden Messdaten
+- **Tooltip-Interaktionen** für Detailinformationen
+
+---
+
+## Datenfluss
+1. **Abruf der Messdaten** über `GET /data`
+2. Verarbeitung im Modul **dataHandler** (Parsing, Filterung, Sortierung)
+3. Übergabe an **chartRenderer** zur visuellen Darstellung
+4. **DOM-Update** bei Filteränderung oder neuen Daten
+
+```txt
+Nutzer → UI-Filter → dataHandler → chartRenderer → DOM
+```
+
+---
+
+## API-Details
+### Route: `/data`
+**Methode:** GET
+
+**Zweck:** Abrufen der Messdaten zur Visualisierung.
+
+**Optionale Query-Parameter:**
+- `filter` – definiert etwa Zeitintervalle oder Belichtungsbereiche
+
+**Erwartete Antwort:**
+Ein Array von Messobjekten:
+```json
+[
+  {
+    "timestamp": "2026-02-22T22:01:00Z",
+    "temperature": 3.4,
+    "humidity": 87.2,
+    "iso": 800,
+    "exposure_time": 15.0,
+    "brightness": 0.76
+  }
+]
+```
+
+---
+
+## Aufbau des Projektes
+```txt
+/ (Root)
+│
+├── index.html              # Einstiegspunkt der Anwendung
+├── css/
+│   ├── style.css           # Layout & Theme
+│   └── responsive.css      # Responsive Anpassungen
+├── js/
+│   ├── app.js              # App-Initialisierung & Event-Handling
+│   ├── api.js              # Datenabruf von /data
+│   ├── dataHandler.js      # Verarbeitung & Filterung der Daten
+│   └── chartRenderer.js    # Erstellung & Aktualisierung der Diagramme
+└── README.md               # Diese Datei
+```
+
+---
+
+## Nutzung
+1. **Server starten**, der die API `/data` bereitstellt.
+2. Die `index.html` im Browser öffnen.
+3. Messdaten werden automatisch geladen und dargestellt.
+4. Filter- oder Zeitbereich im Interface wählen, um Diagramme anzupassen.
+
+---
+
+## Barrierefreiheit & Responsiveness
+- **Semantische HTML-Struktur** (header, main, footer, section)
+- **ARIA-Attribute** für interaktive Elemente
+- **Mobile-first Designansatz** mit CSS-Variablen für Abstände, Farben und Breakpoints
+
+---
+
+## Sicherheit und Datenschutz
+- Es werden keine personenbezogenen Daten gespeichert oder verarbeitet.
+- API-Zugriffe sind read-only (GET) und erfordern keine Authentifizierung.
+
+---
+
+## Lizenz & Urheberrecht
+© 2026 Donau2Space.de – Alle Rechte vorbehalten.