Colormaps

@latkit/colormaps provides named transfer functions and labels that can be shared between network, monitor, and legend UI.

Use a colormap

import { colormap } from '@latkit/colormaps';

network.setColormap(colormap('viridis'));
monitor.setColormap(colormap('magma'));

The returned function accepts a normalized value in [0, 1] and returns RGB channels in [0, 1].

Build a legend

Use COLORMAP_LABEL for display text and colormapGradientCss() for a CSS gradient that matches the same evaluator used by the renderers.

import { COLORMAP_LABEL, colormap, colormapGradientCss } from '@latkit/colormaps';

const button = document.createElement('button');
button.type = 'button';
button.title = COLORMAP_LABEL.viridis;
button.style.background = colormapGradientCss('viridis', 'to right');
button.addEventListener('click', () => network.setColormap(colormap('viridis')));

Choose sequential or diverging maps

Sequential maps encode magnitude. Diverging maps encode signed deviation around a midpoint.

import { COLORMAP_NAMES, isDiverging } from '@latkit/colormaps';

const divergingNames = COLORMAP_NAMES.filter((name) => isDiverging(name));

Use sequential maps for quantities like load or count. Use diverging maps for quantities where values above and below a reference point both matter.