# 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.