150 lines
4.0 KiB
Markdown
150 lines
4.0 KiB
Markdown
# 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:
|
||
|
||
```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/)
|