@visx/heatmap

@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

Changelog

v3.12.0 (2024-11-07)

:rocket: Enhancements

• feat(sankey): add @visx/sankey #1880

:memo: Documentation

• Fix small error in the code example in the "Theming" section #1863

:trophy: Contributors

• jacksonhardaker
• maurer2