MLC Isometric Heatmap — Zeitreihen als isometrische 3D-Landschaft

Eine abhängigkeitsfreie TypeScript-Bibliothek, die 2D-Matrizen und Zeitreihen in isometrische 3D-Landschaften als reines, interaktives SVG verwandelt. Entwickelt für Sensorik, Umweltüberwachung, Servermetriken und Kalenderdaten.

Warum isometrisch statt flach?

Eine klassische Heatmap in der Fläche stößt schnell an menschliche Wahrnehmungsgrenzen: Nahe beieinanderliegende Farbnuancen lassen sich mit dem bloßen Auge kaum zuverlässig unterscheiden. Man liest die Legende statt der eigentlichen Daten.

mlc-isometric-heatmap gibt dem Messwert eine zweite Dimension: Höhe.

• Höhe und Farbe tragen denselben Wert: Das Auge erfasst Spitzen und Täler sofort an der Kontur, selbst wenn Farbunterschiede subtil sind.
• Plastische Tiefe: Muster über Wochentage, Stundenzyklen oder saisonale Trends springen unmittelbar ins Auge.
• Interaktiv ohne JavaScript: Jedes Element enthält semantische <title>-Tags für Barrierefreiheit und Tooltips sowie CSS-basierte Hervorhebungen beim Überfahren mit dem Mauszeiger.

Schnellstart

Installation via npm

npm install mlc-isometric-heatmap

Verwendung im Browser oder in Node.js

import { HeatmapGrid } from 'mlc-isometric-heatmap';

// 2D-Matrix der Messwerte (z. B. 7 Wochentage × 24 Stunden)
const data = [
  [12.4, 14.1, 15.0, 18.2, 21.5, 23.0, 20.1],
  [11.8, 13.5, 14.8, 17.9, 20.8, 22.4, 19.5],
  // ...weitere Zeilen
];

const heatmap = new HeatmapGrid({
  data,
  shape: 'mesh',          // 'mesh' | 'prism' | 'cylinder' | 'ribbon' | 'flatribbon'
  colorScheme: 'sunset',  // 'sunset' | 'emerald' | 'sky' | 'coral'
  heightScale: 60,
  rowLabels: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
});

const svgString = heatmap.render();

Vielfältige Darstellungsformen

Je nach Datensatz und Dichte bietet die Bibliothek unterschiedliche Geometrien:

1. Höhenrelief (3D Mesh): Ein zusammenhängendes Polygonnetz mit gerichteter Licht- und Schattensimulation. Ideal für dichte Sensor- und Geländedaten.
2. Schwebende Bänder (Ribbons & Flat Ribbons): Kontinuierliche Bezier-Kurven entlang einzelner Zeitreihen mit Schattenwurf auf das Grundgitter. Perfekt für Tages- und Wochenprofile.
3. Prismen & Zylinder: Diskrete Säulen mit anpassbaren Kanten, Radien und Abständen für klassische Kalender- und Stundenraster.
4. Maßstabswand (Height Grid): Optionale isometrische Rückwand mit Gitternetzlinien und Wertebeschriftung für metrische Orientierung.

Interaktives Online-Handbuch

Für eine vertiefte Dokumentation steht das vollständige Online-Handbuch zur Verfügung:

👉 Zum interaktiven Handbuch auf mlcgo.eu

Das Handbuch umfasst 7 Kapitel mit 45 interaktiven Live-Beispielen:

• Kapitel 1: Warum isometrisch? Grundlagen und Projektionsgeometrie
• Kapitel 2: Die erste Heatmap — Optionen, Skalierung und Ausrichtung
• Kapitel 3: Formen — Prismen, Zylinder, Bänder und 3D-Meshes im Vergleich
• Kapitel 4: Farben & Verläufe — Diskrete Paletten und kontinuierliche SVG-Gradients
• Kapitel 5: Zeitreihen — Kalenderraster, 24h-Tagesprofile und Perioden
• Kapitel 6: Lücken im Raster — Nullwerte, Ausfälle und unvollständige Messreihen
• Kapitel 7: Galerie — Praxisbeispiele von Raumklima bis Solarertrag

Technische Highlights

• Reines Vektor-SVG: Gestochen scharf auf Retina-Displays, 4K-Monitoren und Print-Medien.
• Keine Abhängigkeiten: Weder Canvas, WebGL, D3 noch Three.js erforderlich. Die Bibliothek ist schlank, schnell und unabhängig.
• Server & Browser: Läuft im Browser, in SSR-Frameworks (SvelteKit, Next.js, Nuxt) sowie in reinen Node.js-Backend-Diensten oder CLI-Tools zur PDF- und Report-Generierung.
• Open Source: Lizenziert unter der MIT-Lizenz auf GitHub.