Kapitel 4: Farbe, Verlauf und Kontrast

Acht Schemata sind eingebaut: github, emerald, sky, coral, amber, purple, sunset und grayscale. Jedes bringt eine helle und eine dunkle Fassung mit; dark: true schaltet um.

grid.render({ colorScheme: 'sunset', dark: true });

Die Wahl ist keine Dekoration

Ein Farbschema entscheidet mit, welche Unterschiede sichtbar werden. grayscale klingt nach Verzicht, ist aber die ehrlichste Wahl, wenn die Grafik gedruckt wird oder wenn Farbe bereits eine andere Bedeutung trägt.

Ein Jahr in Graustufen. Die Höhe trägt die Aussage allein — und trägt sie.

Dasselbe Prinzip in Coral: die Farbe verstärkt, was die Höhe schon sagt.

Verläufe zwischen den Zellen

Standardmässig bekommt jede Zelle ihre eigene Farbe. Bei ribbon und flatribbon kann die Farbe stattdessen stetig zwischen den Stützpunkten übergehen. Das Ergebnis liest sich wie ein Verlauf und nicht wie eine Folge von Stufen — richtig für Grössen, die sich tatsächlich stetig ändern.

Sechs Monate mit stetigem Farbverlauf. Die Übergänge sind so glatt wie die Grösse, die sie zeigen.

Die Null ist eine Farbe wert

zeroColor färbt Zellen mit dem Wert null gesondert ein. Das ist wichtiger, als es klingt: eine Null ist ein gemessener Wert, kein fehlender. Wer beide gleich darstellt, verliert die Unterscheidung — und trifft Entscheidungen auf einer Grafik, die eine Lücke als Ruhe ausgibt.

Die Nullwerte sind grün eingefärbt und dadurch als gemessen erkennbar.

Deckkraft und Untergrund

opacity unter 1.0 lässt Rasterlinien und dahinterliegende Reihen durchscheinen. Bei dicht gestellten Reihen ist das oft der Unterschied zwischen Tiefe und Brei.

Teiltransparente Säulen: das Raster darunter bleibt sichtbar und gibt Orientierung.