First commit

2025-11-14 08:05:43 +00:00
commit 01fc486db7
3 changed files with 792 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,149 @@
+# SDS-Feinstaubbelastung Datenvisualisierung
+
+Eine interaktive Web-Anwendung zur Visualisierung von SDS-Feinstaubsensor-Daten (Particulate Matter) mit automatischer Ausreißer-Erkennung und Filterung.
+
+![Vorschau](https://web.unixweb.home64.de/assets/sds-preview.png)
+
+## Funktionen
+
+- **📊 Interaktive Visualisierung**: Zeitreihen-Darstellung von SDS_P1 und SDS_P2 Messwerten mit Chart.js
+- **📁 Flexible Datenquellen**: Laden von JSON-Dateien oder direkt von API-Endpunkten
+- **🔍 Automatische Ausreißer-Erkennung**: IQR-basierte (Interquartile Range) Filterung von fehlerhaften Messwerten
+- **⚙️ Anpassbare Filter**: Manuelle Einstellung der Grenzwerte für SDS_P1 und SDS_P2
+- **📈 Statistiken**: Automatische Berechnung von Durchschnittswerten, Datenpunktanzahl und Zeiträumen
+- **🎨 Modernes Design**: Responsives Layout mit Gradient-Hintergrund und ansprechender Benutzeroberfläche
+
+## Verwendung
+
+### Lokal öffnen
+
+Die Anwendung ist eine standalone HTML-Datei und kann direkt im Browser geöffnet werden:
+
+```bash
+# macOS
+open feinstaub.html
+
+# Linux
+xdg-open feinstaub.html
+
+# Windows
+start feinstaub.html
+```
+
+Alternativ über einen lokalen Webserver:
+
+```bash
+python3 -m http.server 8000
+```
+
+Dann im Browser öffnen: `http://localhost:8000/feinstaub.html`
+
+### Daten laden
+
+**Option 1: JSON-Datei hochladen**
+- Klicken Sie auf "JSON Datei laden"
+- Wählen Sie eine JSON-Datei mit Sensordaten aus
+
+**Option 2: Von API laden**
+- Geben Sie die API-URL in das Eingabefeld ein
+- Klicken Sie auf "Von API laden"
+
+### Datenformat
+
+Die Anwendung unterstützt folgende JSON-Formate:
+
+```json
+[
+  {
+    "Uhrzeit": "10:00:38",
+    "SDS_P1": 9.15,
+    "SDS_P2": 6.22
+  },
+  {
+    "Uhrzeit": "10:15:36",
+    "SDS_P1": 9.75,
+    "SDS_P2": 5.97
+  }
+]
+```
+
+Oder als Objekt mit Daten-Array:
+
+```json
+{
+  "data": [
+    { "Uhrzeit": "10:00:38", "SDS_P1": 9.15, "SDS_P2": 6.22 }
+  ]
+}
+```
+
+**Unterstützte Zeitstempel-Felder** (in Reihenfolge der Priorität):
+- `Uhrzeit`
+- `timestamp`
+- `Zeitstempel`
+- `created_at`
+
+## Ausreißer-Filterung
+
+Die Anwendung verwendet eine statistische Methode zur automatischen Erkennung von Ausreißern:
+
+1. **IQR-Methode**: Berechnung des Interquartilsabstands (Q3 - Q1)
+2. **Obergrenze**: Q3 + (1,5 × IQR)
+3. **95. Perzentil**: Zusätzliche Begrenzung auf das 95. Perzentil
+
+Die automatisch erkannten Schwellenwerte können manuell über die Schieberegler angepasst werden.
+
+## Technische Details
+
+- **Framework**: Vanilla JavaScript (keine Build-Tools erforderlich)
+- **Visualisierung**: Chart.js 3.9.1 (via CDN)
+- **Styling**: Modernes CSS mit CSS Grid und Flexbox
+- **Browser-Kompatibilität**: Moderne Browser (Chrome, Firefox, Safari, Edge)
+
+## Architektur
+
+```
+feinstaub.html
+├── HTML-Struktur
+│   ├── Header mit Datei-Upload und API-Eingabe
+│   ├── Filter-Sektion mit Schiebereglern
+│   ├── Statistik-Karten
+│   └── Chart-Container
+├── CSS (eingebettet)
+│   ├── Responsives Grid-Layout
+│   ├── Gradient-Hintergrund
+│   └── Komponentenstile
+└── JavaScript (eingebettet)
+    ├── Datenverarbeitung (processData, applyFilters)
+    ├── Ausreißer-Erkennung (calculateOutlierThreshold)
+    ├── Chart-Rendering (updateChart)
+    └── Event-Handler für Interaktionen
+```
+
+## Entwicklung
+
+Da es sich um eine einzelne HTML-Datei handelt:
+
+1. Datei `feinstaub.html` bearbeiten
+2. Im Browser aktualisieren (F5)
+3. Keine Kompilierung oder Build-Schritte erforderlich
+
+## Beispieldaten
+
+Die Anwendung enthält eingebettete Beispieldaten, die beim ersten Laden automatisch angezeigt werden. Diese können als Referenz für das erwartete Datenformat dienen.
+
+## Autor
+
+Entwickelt von **Joachim Hummel** (Next8AI)
+
+- Website: [joachimhummel.de](https://www.joachimhummel.de)
+- Projekt-URL: [next8ai.de/sds-visualisierung](https://next8ai.de/sds-visualisierung/)
+
+## Lizenz
+
+© 2025 Joachim Hummel. Alle Rechte vorbehalten.
+
+## Links
+
+- [Impressum](https://next8ai.de/impressum/)
+- [Datenschutz](https://next8ai.de/datenschutz/)