Add data_visualization/README.md

data_visualization/README.md

@@ -0,0 +1,76 @@
+# WLAN Sternenhimmel Ilzstausee – Echtzeit-WLAN-Datenvisualisierung
+
+## Überblick
+Diese Webanwendung dient der interaktiven, webbasierten Visualisierung von in Echtzeit erfassten WLAN-Daten rund um den Ilzstausee. Kernstück ist eine dynamisch erzeugte Heatmap, die Signalstärken und relevante Metadaten (SSID, Frequenz, RSSI, SNR) georeferenziert darstellt.
+
+Die Anwendung ist Teil des **Experiment-Schlüssels:** `wlan_sternenhimmel_ilzstausee` mit dem Artefakt **`data_visualization`**.
+
+---
+
+## Zielsetzung
+Die visualisierten Daten sollen:
+- Signalverteilungen im Gelände sichtbar machen,
+- Frequenzabhängige Abdeckungen im 2,4 GHz- und 5 GHz-Band untersuchen,
+- Dynamische Änderungen (z. B. durch Bewegungen oder Interferenzen) in Echtzeit darstellen.
+
+---
+
+## Hauptfunktionen
+- **Echtzeit-Heatmap:** Darstellung der Signalstärke über Geokoordinatenpunkte.
+- **Metadatenanzeige:** Anzeige von SSID, Frequenz, RSSI und SNR für jeden Messpunkt.
+- **Kartensteuerung:** Zoom, Pan, Layer-Umschaltung (z. B. zwischen Satellit und Standardkarte).
+- **Frequenzfilter:** Auswahl zwischen 2.4 GHz und 5 GHz Messwerten.
+- **Legende & Statistik:** Anzeige von minimalen, maximalen und durchschnittlichen Signalstärken.
+- **Responsive Design:** Optimiert für Desktop- und Tabletgeräte.
+- **Automatische Aktualisierung:** Regelmäßige Erneuerung der Anzeige bei neuen Daten vom ESP32.
+
+---
+
+## System- und Datenfluss
+1. **Datenerfassung:** ESP32-Module scannen lokale WLANs und erfassen Standort- sowie Signalstärkeinformationen.
+2. **Übertragung:** Die Messdaten werden in regelmäßigen Intervallen als JSON-Objekte (Struktur: `heatmap_data`) an den Webserver weitergegeben.
+3. **Interpretation im Browser:** JavaScript-Module nehmen diese Strukturen entgegen, parsen sie und aktualisieren:
+   - Die Heatmap-Darstellung im Canvas- oder SVG-Element.
+   - Die numerischen Statistiken im UI.
+4. **Interaktive Steuerung:** Nutzer können Filteroptionen anwenden, um spezifische Frequenzbereiche oder Netzwerktypen auszuwählen.
+
+---
+
+## Ordnerstruktur
+```
+/data_visualization
+│
+├── index.html                 # Hauptoberfläche mit Karten- und Statistiklayout
+├── css/
+│   ├── main.css               # Hauptstyling inkl. Layout, Heatmap-Layer, Responsive-Design
+├── js/
+│   ├── app.js                 # Einstiegspunkt, Initialisierung der Karte und Datenverarbeitung
+│   ├── heatmap.js             # Datenrendering und Layer-Aktualisierung
+│   ├── filters.js             # Frequenzband- und Metadatenfilter
+│   ├── stats.js               # Berechnung und Anzeige von Signalstatistiken
+├── assets/                    # (optional, keine externen Bilder/Grafiken)
+└── README.md                 # Dieses Dokument
+```
+
+---
+
+## Funktionsweise der Echtzeit-Heatmap
+1. **Initialisierung:** Beim Laden öffnet sich eine Kartendarstellung über dem Ilzstausee.
+2. **Heatmap-Layer:** Die Messpunkte werden nach Signalstärke eingefärbt und überlagert.
+3. **Web-Update:** Bei neuen Datensätzen wird die Heatmap ohne Neuladen des Fensters aktualisiert.
+4. **Statistikfeld:** Zeigt kontinuierlich Mittelwerte und Extremwerte an, synchron mit der Heatmap.
+
+---
+
+## Nutzungshinweise
+- Für produktive Nutzung wird empfohlen, die Anwendung über einen lokalen oder entfernten Webserver (z. B. `http://localhost`) auszuführen.
+- Datenquellen müssen im gleichen Netzwerk bereitgestellt oder serverseitig weitergeleitet werden.
+- Unterstützte Browser: Aktuelle Versionen von Firefox, Chrome oder Edge.
+- Keine externen Frameworks oder Bildressourcen notwendig.
+
+---
+
+## Lizenz
+© 2026 Donau2Space.de
+
+Dieses Projekt ist ausschließlich zu Forschungs- und Visualisierungszwecken vorgesehen und enthält keine proprietären oder urheberrechtlich geschützten Inhalte Dritter.