Color Legend

The readable half of every colored viewer.

Preview

About

A heatmap without a legend isn't a figure, it's a decoration — you can see that two cells differ but not by how much or in which direction. ColorBar (continuous, with the neutral point marked on diverging ramps) and ColorLegend (categorical swatches) both take a bio-scale scale rather than a duplicated list of colors, so the legend can't drift out of sync with what it labels. drawColorBar paints the same legend straight onto a canvas, for viewers that get exported to PNG where a DOM legend simply wouldn't be in the image.

Usage

import { ColorBar, ColorLegend } from "@/components/ui/color-legend"
import { scaleDiverging } from "@/lib/bio-scale"

const scale = scaleDiverging({ domain: [-2.5, 2.5], ramp: "rdBu" })

<ColorBar scale={scale} label="row z-score" />