@vx/heatmap
A Heatmap is a series 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/heatmap
Components
API
<HeatmapCircle />
# HeatmapCircle.bins<func>
Default | d => d.bins |
# HeatmapCircle.children<func>
# HeatmapCircle.className<string>
# HeatmapCircle.colorScale<func>
Default | d => undefined |
# HeatmapCircle.count<func>
Default | d => d.count |
# HeatmapCircle.data<array>
# HeatmapCircle.gap<number>
Default | 1 |
# HeatmapCircle.left<number>
# HeatmapCircle.opacityScale<func>
Default | d => 1 |
# HeatmapCircle.radius<number>
Default | 6 |
# HeatmapCircle.top<number>
# HeatmapCircle.xScale<func> required
# HeatmapCircle.yScale<func> required
<HeatmapRect />
# HeatmapRect.binHeight<number>
# HeatmapRect.binWidth<number>
# HeatmapRect.bins<func>
Default | d => d.bins |
# HeatmapRect.children<func>
# HeatmapRect.className<string>
# HeatmapRect.colorScale<func>
Default | d => undefined |
# HeatmapRect.count<func>
Default | d => d.count |
# HeatmapRect.data<array>
# HeatmapRect.gap<number>
Default | 1 |
# HeatmapRect.left<number>
# HeatmapRect.opacityScale<func>
Default | d => 1 |
# HeatmapRect.top<number>
# HeatmapRect.x0<number>
Default | 0 |
# HeatmapRect.xScale<func>
# HeatmapRect.yScale<func>