3.3.0 • Published 10 months ago
@visx/heatmap v3.3.0
@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
3.3.0
10 months ago
2.17.0
1 year ago
3.0.0
1 year ago
2.17.0-alpha.0
1 year ago
2.10.0-alpha.0
2 years ago
2.10.0
2 years ago
2.1.2
3 years ago
2.1.0
3 years ago
2.0.1-alpha.0
3 years ago
3.0.0-alpha.0
3 years ago
1.17.1
3 years ago
1.7.0
3 years ago
1.6.1
3 years ago
1.0.0
4 years ago
0.0.200-alpha.0
4 years ago