Add data_visualization/README.md

data_visualization/README.md

@@ -0,0 +1,75 @@
+# Langzeitbelichtung Nachtfotografie – Datenvisualisierung
+
+## Ziel
+Diese Anwendung dient der Visualisierung und Analyse von Temperatur- und Bilddaten aus einem Langzeitbelichtungs-Experiment bei Nacht. Sie stellt Temperaturverläufe und aufgenommene Bilder dar, um Zusammenhänge zwischen Temperaturbedingungen und Bildqualität zu erforschen.
+
+## Funktionsübersicht
+- **Abruf und Anzeige** von Temperatur- und Bilddaten über eine API.
+- **Liniendiagramm** zur Darstellung der Temperaturentwicklung über die Zeit.
+- **Bildergalerie** mit Navigations- und Zoomfunktion.
+- **Filterung** nach Zeit oder Temperaturwerten.
+- **Responsive Gestaltung** für Desktop und mobile Geräte.
+- **Visuelle Zusammenfassung** mit Durchschnittstemperatur und Anzahl der verwendbaren Bilder.
+
+## Datenfluss
+1. Beim Laden des Frontends wird ein GET-Request an die API-Route `/data` gesendet.
+2. Die API liefert ein JSON-Objekt im folgenden Format:
+   ```json
+   {
+     "temperatures": [
+       {"timestamp": "2026-03-24T22:00:00Z", "value": 12.3},
+       {"timestamp": "2026-03-24T23:00:00Z", "value": 11.9}
+     ],
+     "images": [
+       {"filename": "img_001.jpg", "timestamp": "2026-03-24T22:00:00Z", "metadata": {"exposure": "60s"}}
+     ]
+   }
+   ```
+3. JavaScript verarbeitet diese Daten und rendert:
+   - ein Temperaturdiagramm,
+   - eine interaktive Galerie,
+   - statistische Auswertungen (z. B. Durchschnittstemperatur).
+4. Benutzerinteraktionen (z. B. Filterung) führen zur Neuberechnung und Aktualisierung der Visualisierungen im DOM.
+
+## API-Nutzung
+### Route: `/data`
+- **Methode:** GET
+- **Verwendung:** Abruf gesammelter Temperatur- und Bilddaten.
+- **Erwarteter Response:**
+  ```json
+  {
+    "temperatures": [ {"timestamp": string, "value": number} ],
+    "images": [ {"filename": string, "timestamp": string, "metadata": object} ]
+  }
+  ```
+
+Die Daten werden von `js/api.js` abgefragt und im Frontend verarbeitet.
+
+## Struktur
+```
+.
+├── index.html               # Einstiegspunkt
+├── css/
+│   ├── styles.css           # Layout und Komponenten-Styling
+│   └── responsive.css       # Zusätzliche responsive Anpassungen
+├── js/
+│   ├── api.js               # API-Kommunikation
+│   ├── chart.js             # Liniendiagramm-Rendering
+│   ├── gallery.js           # Bildergalerie und Zoomfunktionen
+│   └── filters.js           # Filterlogik
+└── README.md                # Projektdokumentation (diese Datei)
+```
+
+## Responsives Design
+- **Mobile-first:** Basislayout für kleine Bildschirme; stufenweise Skalierung bis Desktop.
+- **Fluid Layout:** relative Größen (rem, %) und CSS-Variablen.
+- **Barrierefreiheit:** semantische HTML-Struktur, ARIA-Attribute bei dynamischen Inhalten.
+
+## Nutzung
+1. Lokalen Server starten oder Projekt auf Webserver bereitstellen.
+2. API unter `/data` muss erreichbar sein.
+3. Browser öffnen und `index.html` laden.
+4. Mit Filtern oder Zooms interagieren, um Datenausschnitte zu analysieren.
+
+## Lizenz & Copyright
+© 2026 Donau2Space.de