donau2space_experiment/data_visualization

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

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:

[
  {
    "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:

[
  {
    "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