@vx/heatmap

npm install --save @vx/heatmap

A Heatmap is a series of shapes where the data values are represented as colors.

Example

Example heatmap

<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)
});

<HeatmapRect /> Properties

Name Default Type Description
className string className for each
data array The data for your chart
binWidth number The width of the bin.
binHeight number The height of the bin.
x 0 number The x coordinate for heatmap.
gap 1 number The gap between heatmap shapes.
step 0 number The step between heatmap shapes.
xScale function A scale function for the xs.
yScale function A scale function for the ys.
colorScale function A color scale function.
opacityScale d => 1 function A scale function between 1 and 0.
bin d => d.bin function An accessor function get the "bin".
bins d => d.bins function An accessor function get the "bins".
count d => d.count function An accessor function get the "count".

<HeatmapCircle /> Properties

Name Default Type Description
className string className for each
data array The data for your chart
binWidth number The width of the bin.
binHeight number The height of the bin.
x 0 number The x coordinate for heatmap.
gap 1 number The gap between heatmap shapes.
step 0 number The step between heatmap shapes.
radius 6 number The radius of each circle.
xScale function A scale function for the xs.
yScale function A scale function for the ys.
colorScale function A color scale function.
opacityScale d => 1 function A scale function between 1 and 0.
bin d => d.bin function An accessor function get the "bin".
bins d => d.bins function An accessor function get the "bins".
count d => d.count function An accessor function get the "count".