Add data_visualization/README.md

data_visualization/README.md

@@ -0,0 +1,81 @@
+# Donau-Daten-Visualisierungs-App
+
+## Übersicht
+Diese Webanwendung dient der **Visualisierung akustischer und sensordatenbasierter Messungen** entlang der Donau. Sie verarbeitet mikrofonische Aufnahmen und erzeugt Frequenz- sowie Vibrationsanalysen, die durch KI-Modelle interpretiert werden. Die Ergebnisse werden interaktiv und responsiv dargestellt.
+
+---
+
+## Ziel
+Zweck der Anwendung ist die Bereitstellung einer **intuitiven Benutzeroberfläche** zur Anzeige, Analyse und Filterung von Wasserstands-, Vibrations- und Frequenzdaten. Die Plattform stellt KI-basierte Mustererkennungen in Echtzeit visuell dar.
+
+---
+
+## Kernfunktionen
+- Interaktive Darstellung von Wasserstands- und Vibrationsdaten über Zeit
+- Visualisierung von Frequenzanalyse-Ergebnissen mit Diagrammen (Chart.js)
+- Anzeige von KI-Analysen und Mustererkennungswahrscheinlichkeiten
+- Filtermöglichkeit nach Messzeitraum oder Parametern
+- Responsives Layout für Desktop und Mobile
+
+---
+
+## Datenfluss
+1. **Datenabruf:** Akustische und Sensor-Daten werden über JSON-Dateien oder API-Endpunkte geladen.
+2. **Verarbeitung:** Das Modul `fetch_data` lädt und validiert die Rohdaten.
+3. **Visualisierung:** `render_chart` nutzt Chart.js, um Diagramme dynamisch zu generieren.
+4. **Interaktion:** Nutzerfilter beeinflussen die Darstellung und triggern ein erneutes Rendering.
+
+---
+
+## API-Nutzung
+Aktuell erfolgt **kein externer API-Zugriff**. Datenquellen können lokal oder aus vorbereiteten JSON-Dateien stammen.
+
+```json
+{
+  "routes": []
+}
+```
+
+---
+
+## Ordnerstruktur
+```
+/
+├── index.html              # Einstiegspunkt der Webanwendung
+├── css/
+│   ├── main.css           # Basis-Styles
+│   └── responsive.css     # responsive Anpassungen
+├── js/
+│   ├── fetch_data.js      # Datenabruf und -vorbereitung
+│   ├── render_chart.js    # Chart-Rendering und Aktualisierung
+│   └── filters.js         # Benutzerinteraktionen und Filterlogik
+├── data/
+│   └── *.json             # Beispielhafte Datensätze (lokal)
+└── README.md              # Projektdokumentation
+```
+
+---
+
+## Nutzungshinweise
+1. Stelle sicher, dass alle benötigten JSON-Datensätze im Verzeichnis `/data/` vorhanden sind.
+2. Öffne `index.html` in einem modernen Browser (ES6+ Unterstützung erforderlich).
+3. Interagiere mit Filtern, um Analysen und Diagramme dynamisch anzupassen.
+
+---
+
+## Technologien
+- **HTML5**, **CSS3**, **JavaScript (ES6+)**
+- **Chart.js** für dynamische Diagramme
+- Keine externen Assets, keine Bildreferenzen
+
+---
+
+## Barrierefreiheit und Responsivität
+- Mobile-First-Design mittels flexibler CSS-Layouts
+- Hoher Farbkontrast für Lesbarkeit
+- Einsatz von ARIA-Labels und semantischen HTML-Strukturen
+
+---
+
+## Lizenz und Copyright
+© 2026 Donau2Space.de