Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
Data utilities
Umbrella package

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

Examples

Heatmaps
<HeatmapCircle /> & <HeatmapRect />

APIs

#<HeatmapRect />

# xScale(columnIndex: number) => numberrequired

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

# yScale(rowIndex: number) => numberrequired

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

# binHeightnumber

Height of a rect bin.

Default 6

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

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

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

# binWidthnumber

Width of a rect bin.

Default 6

# children(cells: RectCell<ColumnDatum, BinDatum>[][]) => ReactNode

Render function override, provided with heatmap.

# classNamestring

className to apply to each heatmap rect element.

# colorScaleColorScale

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

Default () => undefined

# count(bin: BinDatum) => number

Accessor that returns the count for the provided Bin.

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

# dataColumnDatum[]

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

Default []

# gapnumber

Pixel gap between heatmap rects.

Default 1

# leftnumber

Left offset applied to heatmap wrapper g element.

# opacityScaleOpacityScale

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

Default () => 1

# topnumber

Top offset applied to heatmap wrapper g element.

# x0number

Default 0

#<HeatmapCircle />

# xScale(columnIndex: number) => numberrequired

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

# yScale(rowIndex: number) => numberrequired

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

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

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

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

# children(cells: CircleCell<ColumnDatum, BinDatum>[][]) => ReactNode

Render function override, provided with heatmap.

# classNamestring

className to apply to each heatmap circle element.

# colorScaleColorScale

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

Default () => undefined

# count(bin: BinDatum) => number

Accessor that returns the count for the provided Bin.

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

# dataColumnDatum[]

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

Default []

# gapnumber

Pixel gap between heatmap circles.

Default 1

# leftnumber

Left offset applied to heatmap wrapper g element.

# opacityScaleOpacityScale

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

Default () => 1

# radiusnumber

Pixel radius of heatmap circles.

Default 6

# topnumber

Top offset applied to heatmap wrapper g element.

Exports