Kapitel 1: Warum isometrisch?

Eine Heatmap in der Fläche kennt jeder: ein Raster aus Kacheln, die Farbe trägt den Wert. Das funktioniert, solange die Werte weit auseinanderliegen. Sobald sie das nicht tun, stösst die Darstellung an eine Grenze, die im Auge liegt und nicht in den Daten — zwei benachbarte Grüntöne unterscheidet niemand zuverlässig, und wer es versucht, liest die Legende statt der Grafik.

Diese Bibliothek gibt dem Wert eine zweite Ausdrucksform: Höhe. Farbe und Höhe tragen dieselbe Zahl, und das Auge liest die eine, wo die andere versagt. Ein Ausreisser ragt heraus, bevor man ihn sucht.

Zwei Messreihen über 24 Stunden. Der Ausschlag am Nachmittag ist als Höhe sofort sichtbar — in der Fläche wäre er ein etwas kräftigeres Grün.

Was die Bibliothek ist

mlc-isometric-heatmap ist eine TypeScript-Bibliothek, die aus einem Zahlenraster eine isometrische 3D-Ansicht als SVG erzeugt. Kein Canvas, kein WebGL, keine Laufzeitabhängigkeit: heraus kommt eine Zeichenkette, die man in eine Seite schreibt, in eine Datei legt oder per E-Mail verschickt.

Das hat Folgen, die über die Technik hinausgehen:

Auflösungsunabhängig. Dieselbe Datei sieht auf einem Telefon und auf einem Plakat gleich scharf aus.
Durchsuchbar und zugänglich. Jede Zelle trägt ein <title>, das Bildschirmleser vorlesen und Browser als Tooltip zeigen.
Interaktiv ohne JavaScript. Hervorhebung beim Überfahren steckt als CSS-Regel im SVG selbst. Alle Beispiele in diesem Buch sind so eingebettet — fahre mit dem Zeiger über eine Säule und der Wert erscheint.
Serverseitig erzeugbar. Die Bibliothek läuft in Node genauso wie im Browser. Ein Bericht kann sein Bild mitbringen, statt es beim Öffnen zu bauen.

Installation

npm install mlc-isometric-heatmap

Ohne Bauwerkzeuge geht es direkt im Browser:

<script type="module">
  import { HeatmapGrid } from 'https://unpkg.com/mlc-isometric-heatmap/dist/index.es.js';
</script>

Wer klassische <script>-Einbindung braucht, nimmt den UMD-Build; die Bibliothek liegt dann unter window.MlcIsometricHeatmap, die Kalender-Aggregatoren unter window.MlcIsometricHeatmapPresets.

Wofür sie gedacht ist

Der Ursprung ist Sensorik: Messwerte über Zeit, mit einer natürlichen Rasterung — Stunden gegen Wochentage, Tage gegen Wochen, Wochen gegen Monate. Überall dort, wo ein Muster sich über zwei Achsen wiederholt, zeigt die isometrische Ansicht mehr als eine Linie.

Ein ganzes Jahr, 53 Wochen gegen 7 Wochentage. Das Muster der Wochenenden liegt offen, ohne dass es jemand hervorheben musste.