From 01fc486db7d0a13e425f7a0d5a63491943093582 Mon Sep 17 00:00:00 2001 From: Joachim Hummel Date: Fri, 14 Nov 2025 08:05:43 +0000 Subject: [PATCH] First commit --- CLAUDE.md | 95 +++++++++ README.md | 149 ++++++++++++++ feinstaub.html | 548 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 792 insertions(+) create mode 100644 CLAUDE.md create mode 100644 README.md create mode 100644 feinstaub.html diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..8f95e6d --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,95 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +This is a single-page HTML application for visualizing SDS (Feinstaub/particulate matter) sensor data. The application is a self-contained HTML file (`feinstaub.html`) with embedded CSS and JavaScript, designed for deployment as a static web page. + +**Language**: German (UI labels, documentation, and metadata are in German) + +## Architecture + +### Single-File Architecture +- **feinstaub.html**: Complete standalone application with embedded styles and scripts +- No build system, package manager, or external dependencies beyond CDN resources +- Uses Chart.js v3.9.1 from CDN for data visualization + +### Core Components + +**Data Processing Pipeline**: +1. Data input: JSON file upload or API endpoint +2. Auto-detection of outlier thresholds using IQR (Interquartile Range) method +3. Filtering based on user-defined or auto-detected thresholds +4. Chart rendering and statistics calculation + +**Key Functions**: +- `processData(jsonData)`: Entry point for data loading, handles different JSON formats +- `applyFilters(data)`: Filters data based on SDS_P1 and SDS_P2 thresholds +- `calculateOutlierThreshold(values)`: IQR-based outlier detection (Q1, Q3, 1.5×IQR rule, capped at 95th percentile) +- `autoDetectThresholds(data)`: Automatically sets filter thresholds based on data distribution +- `renderChart()`: Sorts data by timestamp, applies filters, updates chart and statistics +- `updateChart(labels, p1Data, p2Data)`: Creates/updates Chart.js line chart + +### Data Format + +Expected JSON structure (flexible): +```javascript +// Array format +[ + { Uhrzeit: "10:00:38", SDS_P1: 9.15, SDS_P2: 6.22 }, + // ... +] + +// Or object with data property +{ + "data": [ /* records */ ], + // or "records": [ /* records */ ] +} +``` + +Timestamp field detection (checked in order): +- `Uhrzeit` (primary) +- `timestamp` +- `Zeitstempel` +- `created_at` + +## Development + +### Local Testing +```bash +# Open directly in browser +open feinstaub.html # macOS +xdg-open feinstaub.html # Linux +start feinstaub.html # Windows + +# Or serve via local web server +python3 -m http.server 8000 +# Then visit: http://localhost:8000/feinstaub.html +``` + +### Making Changes +Since this is a single HTML file with embedded scripts and styles: +1. Edit `feinstaub.html` directly +2. Refresh browser to see changes +3. No build or compilation step required + +### Testing with Sample Data +The application includes example data at the bottom of the script (lines 529-536) that loads automatically on page load for demonstration purposes. + +## Metadata and Attribution + +**Author**: Joachim Hummel (Next8AI) +**Copyright**: © 2025 Joachim Hummel +**Website**: https://next8ai.de/sds-visualisierung/ +**Preview Image**: https://web.unixweb.home64.de/assets/sds-preview.png + +All metadata, Open Graph tags, and footer links reference the author and Next8AI branding. Preserve these when making modifications. + +## UI/UX Notes + +- Gradient background (purple theme: #667eea to #764ba2) +- Responsive grid layouts using CSS Grid +- Auto-sizing chart container (600px height) +- Filter controls with real-time slider updates +- Statistics cards showing: data points, averages, time range, filtered count diff --git a/README.md b/README.md new file mode 100644 index 0000000..71876f7 --- /dev/null +++ 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/) diff --git a/feinstaub.html b/feinstaub.html new file mode 100644 index 0000000..d31138d --- /dev/null +++ b/feinstaub.html @@ -0,0 +1,548 @@ + + + + + + + + + + + + + + + + + + + + + + + SDS/Feinstaubbelastung Daten Visualisierung + + + + +
+
+

SDS-Feinstaubbelastung Datenvisualisierung

+
+
+ + +
+ + +
+
+ +
+

Ausreißer-Filter

+
+ + +
+
+
+ + + 100 +
+
+ + + 100 +
+
+ + 0 Datenpunkte entfernt +
+
+
+ +
+ +
+ +
+ +
+
+ + + + + +