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

Abruf der Messdaten über GET /data
Verarbeitung im Modul dataHandler (Parsing, Filterung, Sortierung)
Übergabe an chartRenderer zur visuellen Darstellung
DOM-Update bei Filteränderung oder neuen Daten

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:

[
  {
    "timestamp": "2026-02-22T22:01:00Z",
    "temperature": 3.4,
    "humidity": 87.2,
    "iso": 800,
    "exposure_time": 15.0,
    "brightness": 0.76
  }
]

Aufbau des Projektes

/ (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

Server starten, der die API /data bereitstellt.
Die index.html im Browser öffnen.
Messdaten werden automatisch geladen und dargestellt.
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.

2.9 KiB Raw Permalink Blame History Unescape Escape