@vx/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 @vx/heatmap

Examples

Components

APIs

#<HeatmapRect />

# HeatmapRect.xScale(columnIndex: number) => numberrequired

Given a column index, returns the x position of a rect cell.

# HeatmapRect.yScale(rowIndex: number) => numberrequired

Given a row index, returns the y position of a rect cell.

# HeatmapRect.binHeightnumberoptional

Height of a rect bin.

Default 6

# HeatmapRect.bins(column: ColumnDatum) => BinDatum[]optional

Accessor that returns an array of cell BinDatums (rows) for the provided ColumnData.

Default (d: any) => d && d.bins

# HeatmapRect.binWidthnumberoptional

Width of a rect bin.

Default 6

# HeatmapRect.children(cells: RectCell<ColumnDatum, BinDatum>[][]) => ReactNodeoptional

Render function override, provided with heatmap.

# HeatmapRect.classNamestringoptional

className to apply to each heatmap rect element.

# HeatmapRect.colorScaleColorScaleoptional

Given a count value, returns the desired rect fill color.

Default () => undefined

# HeatmapRect.count(bin: BinDatum) => numberoptional

Accessor that returns the count for the provided Bin.

Default (d: any) => d && d.count

# HeatmapRect.dataColumnDatum[]optional

Array of column data (one per column desired) for the heatmap.

Default []

# HeatmapRect.gapnumberoptional

Pixel gap between heatmap rects.

Default 1

# HeatmapRect.leftnumberoptional

Left offset applied to heatmap wrapper g element.

# HeatmapRect.opacityScaleOpacityScaleoptional

Given a count value, returns the desired rect fill opacity.

Default () => 1

# HeatmapRect.topnumberoptional

Top offset applied to heatmap wrapper g element.

# HeatmapRect.x0numberoptional

Default 0

#<HeatmapCircle />

# HeatmapCircle.xScale(columnIndex: number) => numberrequired

Given a column index, returns the x position of a circle cell.

# HeatmapCircle.yScale(rowIndex: number) => numberrequired

Given a row index, returns the y position of a circle cell.

# HeatmapCircle.bins(column: ColumnDatum) => BinDatum[]optional

Accessor that returns an array of cell BinDatums (rows) for the provided ColumnData.

Default (column: any) => column && column.bins

# HeatmapCircle.children(cells: CircleCell<ColumnDatum, BinDatum>[][]) => ReactNodeoptional

Render function override, provided with heatmap.

# HeatmapCircle.classNamestringoptional

className to apply to each heatmap circle element.

# HeatmapCircle.colorScaleColorScaleoptional

Given a count value, returns the desired circle fill color.

Default () => undefined

# HeatmapCircle.count(bin: BinDatum) => numberoptional

Accessor that returns the count for the provided Bin.

Default (cell: any) => cell && cell.count

# HeatmapCircle.dataColumnDatum[]optional

Array of column data (one per column desired) for the heatmap.

Default []

# HeatmapCircle.gapnumberoptional

Pixel gap between heatmap circles.

Default 1

# HeatmapCircle.leftnumberoptional

Left offset applied to heatmap wrapper g element.

# HeatmapCircle.opacityScaleOpacityScaleoptional

Given a count value, returns the desired circle fill opacity.

Default () => 1

# HeatmapCircle.radiusnumberoptional

Pixel radius of heatmap circles.

Default 6

# HeatmapCircle.topnumberoptional

Top offset applied to heatmap wrapper g element.