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

Height of a rect bin.

Default 6

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

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

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

# binWidthnumber | undefined

Width of a rect bin.

Default 6

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

Render function override, provided with heatmap.

# classNamestring | undefined

className to apply to each heatmap rect element.

# colorScaleColorScale | undefined

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

Default () => undefined

# count((bin: BinDatum) => number) | undefined

Accessor that returns the count for the provided Bin.

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

# dataColumnDatum[] | undefined

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

Default []

# gapnumber | undefined

Pixel gap between heatmap rects.

Default 1

# leftnumber | undefined

Left offset applied to heatmap wrapper g element.

# opacityScaleOpacityScale | undefined

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

Default () => 1

# topnumber | undefined

Top offset applied to heatmap wrapper g element.

# x0number | undefined

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[]) | undefined

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

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

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

Render function override, provided with heatmap.

# classNamestring | undefined

className to apply to each heatmap circle element.

# colorScaleColorScale | undefined

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

Default () => undefined

# count((bin: BinDatum) => number) | undefined

Accessor that returns the count for the provided Bin.

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

# dataColumnDatum[] | undefined

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

Default []

# gapnumber | undefined

Pixel gap between heatmap circles.

Default 1

# leftnumber | undefined

Left offset applied to heatmap wrapper g element.

# opacityScaleOpacityScale | undefined

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

Default () => 1

# radiusnumber | undefined

Pixel radius of heatmap circles.

Default 6

# topnumber | undefined

Top offset applied to heatmap wrapper g element.

Exports