stromlinien_passau_magnetfeld/data_visualization_web_ui/README.md

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

# 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

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