@vx/heatmap

A Heatmap is an arrangement of shapes where the data values are represented as colors.

Example

``js
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:

`js
[
{
bin: 1,
bins: [
{
count: 20,
bin: 23,
},
],
},
];
`

However, you're welcome to use your own structure by defining x, y, z accessors such as:

`js
// 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/heatmap
``