Chart primitives
Layouts & specialized
Interactions
Data utilities
Umbrella package
@vx/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 @vx/heatmapExamples
<HeatmapCircle /> & <HeatmapRect />
Components
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.
Height of a rect bin.
Default 6
Accessor that returns an array of cell BinDatums (rows) for the provided ColumnData.
Default (d: any) => d && d.bins
Width of a rect bin.
Default 6
((cells: RectCell<ColumnDatum, BinDatum>[][]) => ReactNode) | undefinedoptional Render function override, provided with heatmap.
className to apply to each heatmap rect element.
Given a count value, returns the desired rect fill color.
Default () => undefined
Accessor that returns the count for the provided Bin.
Default (d: any) => d && d.count
Array of column data (one per column desired) for the heatmap.
Default []
Pixel gap between heatmap rects.
Default 1
Left offset applied to heatmap wrapper g element.
Given a count value, returns the desired rect fill opacity.
Default () => 1
Top offset applied to heatmap wrapper g element.
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.
Accessor that returns an array of cell BinDatums (rows) for the provided ColumnData.
Default (column: any) => column && column.bins
((cells: CircleCell<ColumnDatum, BinDatum>[][]) => ReactNode) | undefinedoptional Render function override, provided with heatmap.
className to apply to each heatmap circle element.
Given a count value, returns the desired circle fill color.
Default () => undefined
Accessor that returns the count for the provided Bin.
Default (cell: any) => cell && cell.count
Array of column data (one per column desired) for the heatmap.
Default []
Pixel gap between heatmap circles.
Default 1
Left offset applied to heatmap wrapper g element.
Given a count value, returns the desired circle fill opacity.
Default () => 1
Pixel radius of heatmap circles.
Default 6
Top offset applied to heatmap wrapper g element.