feinstaubsensor-visualisierung/README.md

SDS-Feinstaubbelastung Datenvisualisierung

Eine interaktive Web-Anwendung zur Visualisierung von SDS-Feinstaubsensor-Daten (Particulate Matter) mit automatischer Ausreißer-Erkennung und Filterung.

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:

# macOS
open feinstaub.html

# Linux
xdg-open feinstaub.html

# Windows
start feinstaub.html

Alternativ über einen lokalen Webserver:

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:

[
  {
    "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:

{
  "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

NocoDB-Setup

Für die automatische Datenerfassung und -speicherung muss eine NocoDB-Datenbank mit folgender Tabellenstruktur eingerichtet werden:

Erforderliche Tabellenspalten

Spaltenname	Typ	Beschreibung
Title	Text	Optionaler Titel (kann leer bleiben)
SDS_P1	Number	Feinstaub PM10-Wert
SDS_P2	Number	Feinstaub PM2.5-Wert
BME280_Temperature	Number	Temperatur in °C
BME280_Humidity	Number	Luftfeuchtigkeit in %
BME280_Pressure	Number	Luftdruck (optional)
Datum	Date/Text	Datum im Format TT/MM/YYYY
Uhrzeit	Time/Text	Uhrzeit im Format HH:MM:SS

Hinweis: Die genaue Struktur ist in der CSV-Datei 1763107744883.csv zu finden, die als Vorlage dienen kann.

n8n Workflows

Das Projekt enthält zwei n8n-Workflows für die Automatisierung:

1. Datensammlung (feinstaub-daten.json)

Zweck: Automatisches Sammeln von Sensordaten und Speichern in NocoDB

Workflow-Schritte:

1. Schedule Trigger: Läuft alle 15 Minuten automatisch
2. HTTP Request: Ruft Daten von https://feinstaub.homeabc.de/data.json ab
3. NocoDB Create: Schreibt die Sensordaten in die NocoDB-Tabelle

Import in n8n:

# Workflow in n8n importieren
# Settings → Import from File → feinstaub-daten.json auswählen

Konfiguration:

• NocoDB API-Token einrichten
• Project-ID und Table-ID anpassen
• Sensor-URL bei Bedarf ändern

2. Daten-Webhook (feinstaub-webhook.json)

Zweck: API-Endpunkt für die Visualisierung

Workflow-Schritte:

1. Webhook: Empfängt Anfragen auf /sds-data
2. NocoDB GetAll: Liest alle Daten aus der Tabelle (SDS_P1, SDS_P2, Uhrzeit)
3. JavaScript Code: Filtert die letzten 50 Einträge
4. Response: Gibt JSON-Daten zurück

Verwendung:

// In feinstaub.html die API-URL anpassen:
const webhookUrl = 'https://your-n8n-instance.com/webhook/sds-data';

CSV-Export

Die Datei 1763107744883.csv enthält exportierte Sensordaten im CSV-Format und dient als:

• Beispieldatei für die erwartete Datenstruktur
• Vorlage für NocoDB-Tabellendefinition
• Backup der Sensordaten

CSV-Struktur: Siehe NocoDB-Setup oben

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
• Projekt-URL: next8ai.de/sds-visualisierung

Lizenz

© 2025 Joachim Hummel. Alle Rechte vorbehalten.

Links

• Impressum
• Datenschutz