Add data_visualization_web_ui/README.md

data_visualization_web_ui/README.md

@@ -0,0 +1,101 @@
+# Web-Interface für Magnetfeld-Analyse in Passau
+
+## Zweck
+Diese Webanwendung dient zur **Visualisierung und Analyse von Magnetometerdaten** aus Messungen in Passau. Die Benutzeroberfläche erlaubt es, zeitabhängige Magnetfeldverläufe und spektrale Auswertungen zu betrachten, Analysemetriken wie Durchschnittswerte oder Rauschanteile zu vergleichen und Daten interaktiv zu filtern.
+
+---
+
+## Hauptfunktionen
+- Visualisierung von Magnetometerdaten in Zeitreihen- und Spektraldiagrammen
+- Anzeige von Analyseergebnissen wie Durchschnittswerten, Peaks und Noise-Statistiken
+- Filterung nach Zeitfenster und Magnetometer
+- Interaktive Diagramme mit Zoom- und Hover-Funktion
+- Automatisches Nachladen neuer Analyseergebnisse per API
+- Responsives Layout, optimiert für Desktop- und Mobilgeräte
+
+---
+
+## Setup
+### Voraussetzungen
+- Moderner Webbrowser (Chrome, Firefox, Edge, Safari)
+- Node.js (>= 18) empfohlen zum lokalen Hosting
+
+### Lokale Entwicklung
+```bash
+# Repository klonen
+git clone <repository-url>
+cd data_visualization_web_ui
+
+# Lokalen Server starten (z. B. mit serve)
+npm install -g serve
+serve .
+```
+
+### Deployment
+Die Anwendung kann auf jedem statischen Webserver betrieben werden. API-Endpunkte müssen unter derselben Domain oder mit CORS-Konfiguration erreichbar sein.
+
+---
+
+## API-Routen
+
+| Route | Methode | Beschreibung | Erwartete Parameter | Antwortstruktur |
+|-------|----------|---------------|---------------------|------------------|
+| `/api/data` | GET | Abruf der Magnetometer-Messdaten | `time_range`, `sensor_id` | Array von Objekten `{ timestamp, sensor, Bx, By, Bz }` |
+| `/api/analysis` | GET | Abruf der Analysemetriken (Durchschnitt, Peaks etc.) | – | Objekt `{ mean, peaks, noise, drift }` |
+
+### Beispiel: Anfragen
+```js
+// Abruf der Messdaten
+fetch('/api/data?time_range=last_24h&sensor_id=1')
+  .then(res => res.json())
+  .then(console.log);
+
+// Abruf der Analyseergebnisse
+fetch('/api/analysis')
+  .then(res => res.json())
+  .then(console.log);
+```
+
+---
+
+## Datenfluss
+1. JavaScript-Module laden die Daten asynchron über `/api/data` und `/api/analysis`.
+2. Die Daten werden gefiltert, analysiert und an die Visualisierungskomponenten weitergegeben.
+3. HTML-Komponenten werden dynamisch aktualisiert, um Diagramme und Statistiken anzuzeigen.
+4. Benutzerinteraktionen (Zoom, Filter) lösen neue API-Anfragen aus und aktualisieren die Visualisierungen.
+
+---
+
+## Strukturübersicht
+```
+project_root/
+├── index.html
+├── css/
+│   ├── main.css
+│   └── responsive.css
+├── js/
+│   ├── app.js          # Einstiegspunkt, Initialisierung
+│   ├── api.js          # API-Requests (fetch /api/data, /api/analysis)
+│   ├── charts.js       # Visualisierung (Zeitreihen, Spektren)
+│   └── ui.js           # DOM-Updates, Filter, Interaktion
+└── README.md           # Diese Datei
+```
+
+---
+
+## Sicherheit & Datenschutz
+- Keine personenbezogenen Daten werden übertragen oder gespeichert.
+- API-Zugriffe beschränken sich auf wissenschaftliche Messdaten.
+- Kommunikation mit Backend sollte über HTTPS erfolgen.
+
+---
+
+## Barrierefreiheit & Responsiveness
+- Nutzung semantischer HTML-Elemente (`<main>`, `<section>`, `<nav>`, `<footer>`)
+- Anpassung der Layouts an verschiedene Viewports (Mobile First)
+- ARIA-Attribute zur Unterstützung von Screenreadern
+
+---
+
+## Lizenz & Copyright
+© 2026 Donau2Space.de