diff --git a/data_visualization/README.md b/data_visualization/README.md new file mode 100644 index 0000000..6e15eea --- /dev/null +++ b/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 \ No newline at end of file