Data utilities
Umbrella package
@visx/heatmap
A Heatmap is an arrangement of shapes where the data values are represented as colors.
Example

<HeatmapRect
data={data}
xScale={xScale}
yScale={yScale}
colorScale={colorScale}
opacityScale={opacityScale}
binWidth={bWidth}
binHeight={bWidth}
step={dStep}
gap={0}
/>
Heatmaps generally require structure that has this shape:
[
{
bin: 1,
bins: [
{
count: 20,
bin: 23,
},
],
},
];
However, you're welcome to use your own structure by defining x
, y
, z
accessors such as:
// Example accessors
const x = d => d.myBin;
const y = d => d.myBins;
const z = d => d.myCount;
// Example scale with an accessors
const xScale = scaleLinear({
range: [0, xMax],
domain: extent(data, x),
});
Installation
npm install --save @visx/heatmap
Examples
<HeatmapCircle /> & <HeatmapRect />
APIs
#<HeatmapRect />
Given a column index, returns the x position of a rect cell.
Given a row index, returns the y position of a rect cell.
number | undefined
Height of a rect bin.
Default 6
((column: ColumnDatum) => BinDatum[]) | undefined
Accessor that returns an array of cell BinDatums (rows) for the provided ColumnData.
Default (d: any) => d?.bins
number | undefined
Width of a rect bin.
Default 6
((cells: RectCell<ColumnDatum, BinDatum>[][]) => ReactNode) | undefined
Render function override, provided with heatmap.
string | undefined
className to apply to each heatmap rect element.
ColorScale | undefined
Given a count value, returns the desired rect fill color.
Default () => undefined
((bin: BinDatum) => number) | undefined
Accessor that returns the count for the provided Bin.
Default (d: any) => d?.count
ColumnDatum[] | undefined
Array of column data (one per column desired) for the heatmap.
Default []
number | undefined
Pixel gap between heatmap rects.
Default 1
number | undefined
Left offset applied to heatmap wrapper g element.
OpacityScale | undefined
Given a count value, returns the desired rect fill opacity.
Default () => 1
number | undefined
Top offset applied to heatmap wrapper g element.
number | undefined
Default 0
#<HeatmapCircle />
Given a column index, returns the x position of a circle cell.
Given a row index, returns the y position of a circle cell.
((column: ColumnDatum) => BinDatum[]) | undefined
Accessor that returns an array of cell BinDatums (rows) for the provided ColumnData.
Default (column: any) => column?.bins
((cells: CircleCell<ColumnDatum, BinDatum>[][]) => ReactNode) | undefined
Render function override, provided with heatmap.
string | undefined
className to apply to each heatmap circle element.
ColorScale | undefined
Given a count value, returns the desired circle fill color.
Default () => undefined
((bin: BinDatum) => number) | undefined
Accessor that returns the count for the provided Bin.
Default (cell: any) => cell?.count
ColumnDatum[] | undefined
Array of column data (one per column desired) for the heatmap.
Default []
number | undefined
Pixel gap between heatmap circles.
Default 1
number | undefined
Left offset applied to heatmap wrapper g element.
OpacityScale | undefined
Given a count value, returns the desired circle fill opacity.
Default () => 1
number | undefined
Pixel radius of heatmap circles.
Default 6
number | undefined
Top offset applied to heatmap wrapper g element.