Heatmap

A heatmap in REAVIZ visualizes data values within a matrix using color variations. This method, first termed by Cormac Kinney in 1991, is effective for showing patterns in correlations across multiple variables. Heatmaps are particularly useful in displaying large datasets and identifying trends that might not be obvious through other chart types.

Types supported by reaviz:

Where to use:

Visualize Variance: Ideal for displaying variance across multiple variables.
Identify Patterns: Useful for identifying patterns and correlations in data.
Analyze Complex Data: Great for analyzing large datasets with multiple variables.

Quick Start

To create a Heatmap, use import the Heatmap and give it data. The chart will automatically configure itself with the default options exposed via props.

import { Heatmap } from 'reaviz';


export default function App() {
  const data = [
    {
      key: 'Lateral Movement',
      data: [
        {
          key: 'XML',
          data: 0
        },
        {
          key: 'JSON',
          data: 120
        },
        {
          key: 'HTTPS',
          data: 150
        }
      ]
    },
    {
      key: 'Discovery',
      data: [
        {
          key: 'XML',
          data: 100
        },
        {
          key: 'JSON',
          data: 34
        },
        {
          key: 'HTTPS',
          data: 0
        }
      ]
    }
  ];


  return (
    <Heatmap
      height={350}
      width={350}
      data={data}
    />
  );
}

import { Heatmap } from 'reaviz';

export default function App() {
  const data = [
    {
      key: 'Lateral Movement',
      data: [
        {
          key: 'XML',
          data: 0
        },
        {
          key: 'JSON',
          data: 120
        },
        {
          key: 'HTTPS',
          data: 150
        }
      ]
    },
    {
      key: 'Discovery',
      data: [
        {
          key: 'XML',
          data: 100
        },
        {
          key: 'JSON',
          data: 34
        },
        {
          key: 'HTTPS',
          data: 0
        }
      ]
    }
  ];

  return (
    <Heatmap
      height={350}
      width={350}
      data={data}
    />
  );
}

Examples

Heatmap

Year Calendar

Month Calendar

API

Heatmap (opens in a new tab)

Prop	Description	Default
`data`	Data the chart will receive to render. `ChartNestedDataShape[]`	`[]`
`series`	The series component that renders the cell components. `ReactElement<HeatmapSeriesProps, FC<Partial<HeatmapSeriesProps>>>`	`<HeatmapSeries padding={0.3} />`
`yAxis`	The linear axis component for the Y Axis of the chart. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>`	`( <LinearYAxis type="category" axisLine={null} tickSeries={ <LinearYAxisTickSeries line={null} label={<LinearYAxisTickLabel padding={5} />} /> } /> )`
`xAxis`	The linear axis component for the X Axis of the chart. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>`	`( <LinearXAxis type="category" axisLine={null} tickSeries={ <LinearXAxisTickSeries line={null} label={<LinearXAxisTickLabel padding={5} />} /> } /> )`
`secondaryAxis`	Any secondary axis components. Useful for multi-axis charts. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]`
`id`	Id of the chart. `string`
`width`	Width of the chart. If not provided will autosize. `number`
`height`	Height of the chart. If not provided will autosize. `number`
`margins`	Margins for the chart. `Margins`	`10`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

CalendarHeatmap (opens in a new tab)

Prop	Description	Default
`data`	Chart data shape. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[]`
`height`	Height of the component. `number`
`width`	Width of the component. `number`
`view`	View of the calendar renderer. `CalendarView`	`year`
`series`	The series component that renders the cell components. `ReactElement<HeatmapSeriesProps, FC<Partial<HeatmapSeriesProps>>>`	( <HeatmapSeries padding={0.3} emptyColor="transparent" cell={ <HeatmapCell tooltip={ <ChartTooltip content={(d) => `${formatValue(d.data.metadata.date)} ∙ ${formatValue( d.data.value )}` } /> } /> } /> )
`yAxis`	The linear axis component for the Y Axis of the chart. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>`
`xAxis`	The linear axis component for the X Axis of the chart. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>`
`secondaryAxis`	Any secondary axis components. Useful for multi-axis charts. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]`
`id`	Id of the chart. `string`
`margins`	Margins for the chart. `Margins`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

HeatmapSeries (opens in a new tab)

Prop	Description	Default
`padding`	Padding between cells. `number`	`0.1`
`id`	Id set by `Heatmap`. `string`
`data`	Parsed data set by `Heatmap`. `ChartInternalNestedDataShape[]`
`xScale`	D3 scale for X Axis. Set internally by `Heatmap`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `Heatmap`. `any`
`colorScheme`	Color scheme for the chart. `ColorSchemeType \| ColorSchemeStyleArray`	`['rgba(28, 107, 86, 0.5)', '#2da283']`
`emptyColor`	Color for the empty cell of the chart. `string`	`rgba(200,200,200,0.08)`
`animated`	Whether the chart is animated or not. `boolean`	`true`
`cell`	Cell component that will be rendered. `ReactElement<HeatmapCellProps, FC<Partial<HeatmapCellProps>>>`	`<HeatmapCell />`
`selections`	Selected cell(s) in active state `any`

HeatmapCell (opens in a new tab)

Prop	Description	Default
`x`	X Position set by `HeatmapSeries`. `number`
`y`	Y Position set by `HeatmapSeries`. `number`
`rx`	rx SVG Attribute. `number`	`2`
`ry`	ry SVG Attribute. `number`	`2`
`height`	Height of cell set by `HeatmapSeries`. `number`
`width`	Width of cell set by `HeatmapSeries`. `number`
`cellCount`	Total count of cells set by `HeatmapSeries`. `number`
`tooltip`	Tooltip component. `ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>>`	`<ChartTooltip />`
`fill`	Fill color set by `HeatmapSeries`. `string`
`stroke`	Stroke color set by `HeatmapSeries`. `string`
`symbol`	Symbol element to render. `(data: ChartInternalShallowDataShape) => ReactNode`
`data`	Data object set by `Heatmap`. `ChartInternalShallowDataShape`
`animated`	Whether cell is animated or not set by `HeatmapSeries`. `boolean`
`cellIndex`	Cell index set by `HeatmapSeries`. `number`
`cursor`	Cursor style attribute. `string`	`auto`
`onClick`	Event for when the bar is clicked. `(event: any) => void`	`() => undefined`
`onMouseEnter`	Event for when the bar has mouse enter. `(event: any) => void`	`() => undefined`
`onMouseLeave`	Event for when the bar has mouse leave. `(event: any) => void`	`() => undefined`
`className`	Classnames to apply to the element. `any`
`style`	CSS styles to apply to the element. `any`

Funnel Chart Linear Gauge