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

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