Heatmap

A heatmap is a data visualization technique that uses color to represent the magnitude of values in a matrix or spatial area. It helps people quickly understand patterns, trends, and outliers in complex data sets.

Parameters

In addition to the standard parameters heatmaps take the following parameters:

datalist of dicts

A heatmap takes data in the form of a list of dictionaries, each of which has an x, y, and value element, like the following example:

[
  { "x": "A", "y": "1", "value": 5 },
  { "x": "A", "y": "2", "value": 10 },
  { "x": "B", "y": "1", "value": 15 },
  { "x": "B", "y": "2", "value": 20 }
]

We plan to enable the use of CSV files and various data frames in the near future.

show_legendBoolean

The show_legend parameter, if set to true, will render a legend explaining the color palette.

Color parameters

interpString

One of the interpolators as listed. Defaults to "rgb". This parameter sets the mapping between values and colors.

gammaNumber (0.0 to 1.0)

Controls how fast the interpolator transitions between colors.

Example

Here's an example of a heatmap:

<heatmap
data='[
  { "x": "A", "y": "1", "value": 5 },
  { "x": "A", "y": "2", "value": 10 },
  { "x": "B", "y": "1", "value": 15 },
  { "x": "B", "y": "2", "value": 20 }
]'
  width=500
  height=500
  colors='["purple", "orange"]'
  interp="rgb">
>
</heatmap>

which is rendered like this: