Heatmap

A grid of cells colored by a measure. x and y are the two categorical axes, value the intensity. For density across two dimensions.

Loading…

<Heatmap
  query="SELECT species, round(petal_length) AS petal_cm, count(*) AS n FROM db.iris GROUP BY species, petal_cm"
  x="petal_cm"
  y="species"
  value="sum(n)"
  xSort="asc"
/>

Ordering the axes

xSort and ySort order each axis independently:"asc"/"desc" by label, "value-*" by intensity, or an array to pin a specific sequence (useful for days of the week or hours of the day).

Props

Prop	Type	Notes
`data` / `query`	relation \| SQL	Source rows; a relation, or full SQL. Mutually exclusive.
`x` / `y`	column	The two categorical axes.
`value`	measure \| column	Cell intensity, e.g. `sum(amount)`.
`xSort` / `ySort`	`"asc"` \| `"desc"` \| `"value-*"` \| list	Order for each axis.
`color`	`string`	The color scale used to map intensity.
`cellSize`	`string`	Fixed cell dimension, e.g. `"1.5rem"`.
`valueFormat`	d3-format spec	How cell values render in the tooltip.

Expressions in value, query, and filters values support {{binding}} interpolation against the surrounding BindingProvider.

Installation

Heatmap ships in @n6k.io/ui/components. Nothing to install. Register the namespace once in src/app/mdx-components.tsx and the tag resolves in both .mdx and page.py pages:

import * as n6k from "@n6k.io/ui/components";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...n6k, // Heatmap, and every other n6k component
    ...components,
  } as unknown as MDXComponents;
}