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

Installation

npm install --save @vx/heatmap

Components

API

<HeatmapCircle />

# HeatmapCircle.bins<func>
Defaultd => d.bins

# HeatmapCircle.children<func>

# HeatmapCircle.className<string>

# HeatmapCircle.colorScale<func>
Defaultd => undefined

# HeatmapCircle.count<func>
Defaultd => d.count

# HeatmapCircle.data<array>

# HeatmapCircle.gap<number>
Default1

# HeatmapCircle.left<number>

# HeatmapCircle.opacityScale<func>
Defaultd => 1

# HeatmapCircle.radius<number>
Default6

# HeatmapCircle.top<number>

# HeatmapCircle.xScale<func> required

# HeatmapCircle.yScale<func> required

<HeatmapRect />

# HeatmapRect.binHeight<number>

# HeatmapRect.binWidth<number>

# HeatmapRect.bins<func>
Defaultd => d.bins

# HeatmapRect.children<func>

# HeatmapRect.className<string>

# HeatmapRect.colorScale<func>
Defaultd => undefined

# HeatmapRect.count<func>
Defaultd => d.count

# HeatmapRect.data<array>

# HeatmapRect.gap<number>
Default1

# HeatmapRect.left<number>

# HeatmapRect.opacityScale<func>
Defaultd => 1

# HeatmapRect.top<number>

# HeatmapRect.x0<number>
Default0

# HeatmapRect.xScale<func>

# HeatmapRect.yScale<func>