diff --git a/data_visualization/README.md b/data_visualization/README.md new file mode 100644 index 0000000..0a014da --- /dev/null +++ b/data_visualization/README.md @@ -0,0 +1,99 @@ +# 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. \ No newline at end of file