# @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

- HeatmapCircle
- HeatmapRect

## 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>