# 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/)