@visx/heatmap
TypeScript icon, indicating that this package has built-in type declarations

3.3.0 • Public • Published

@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

Package Sidebar

Install

npm i @visx/heatmap

Weekly Downloads

47,651

Version

3.3.0

License

MIT

Unpacked Size

29.6 kB

Total Files

19

Last publish

Collaborators

  • vx-hshoff
  • hshoff
  • christopher.card.williams
  • lencioni