Heatmap

An InteractiveDataDisplay plot which displays a graphical representation of data where the individual values contained in a matrix are represented as colors. If the values are uncertain, it allows to see quantiles of each point and highlight regions with similar values.

See a sample of the heatmap plot.

API

HTML

In HTML, a heatmap plot is indicated by the attribute data-idd-plot="heatmap".

<script type="text/javascript">
    $(document).ready(function () {
        var chart = InteractiveDataDisplay.asPlot($("#chart"));
    });
</script>

<div id="chart" data-idd-plot="chart" style="width: 800px; height: 600px;">    
  <div id="heatmap" data-idd-plot="heatmap" data-idd-style="colorPalette:red,green;">
  1 2 3
  4 5 6
  7 8 9
  </div>
</div>

JavaScript

In JavaScript, use InteractiveDataDisplay.Plot.heatmap(name, data, titles) or InteractiveDataDisplay.Heatmap.draw(data, titles).

The Plot.heatmap function returns Heatmap which allows to update values using Heatmap.draw function. Still it is possible to call Plot.heatmap many times with same name, so that the first call creates the heatmap plot and subsequent calls update the existing plot. The name allows to identify the plot in code and also it is displayed in a tooltip and a legend.

The following example adds "heatmap" plot to the chart; x and y are numeric arrays determining position of heatmap.

chart.heatmap("heatmap", { x: [-4,0,4], y: [-2,0,5], values: [[1,2,-3],[5,1,2],[-2,4,3]], colorPalette: "green,blue" });

ChartViewer

When building ChartViewer, use Plot.heatmap(plotInfo):

ChartViewer.show(chartDiv, {
    "f(x,y)": Plot.heatmap({ x: [-4,0,4], y: [-2,0,5], values: [[1,2,-3],[5,1,2],[-2,4,3]], colorPalette: "green,blue" })
});

See ChartViewer for more details.

Properties

Mandatory properties:

• values is an array of numbers or a set of quantiles. An array may be one- or two-dimensional. May contain NaN indicating the missing value.

Optional properties:

• x is an array of numbers. May contain NaN indicating the missing value.
• y is an array of numbers. May contain NaN indicating the missing value.
• colorPalette is an instance of InteractiveDataDisplay.ColorPalette which allows to get a color from a number. A default palette is used if this property is missed.
• treatAs is either "discrete", "gradient". It is used only if values is one-dimensional array. If values is two-dimensional array the mode is selected automatically. If number of values in arrays of coordinates are equal to corresponding dimensions of data array then heatmap is rendered in a gradient mode. If number of coordinate values are greater by one than dimensions of data then heatmap is rendered in a matrix (discrete or bitmap) mode.
• opacity is a number between 0 and 1, where 0 means transparent, 1 means opaque heatmap.
• interval is an optional parameter which allows to highlight areas where values are similar to the given interval.

x and y represent arrays of corresponding coordinates of grid points, values is an array of values in these grid points. If x or y series are missing they are considered to be sequential integers. Both x and y arrays should have at least two elements.

Uncertain Data

You can define values as uncertain value. In this case, plot represents a median value of data. You can use probes in Chart Viewer or set property interval to see uncertainty value.

Example:

chart.heatmap("heatmap", { 
  x: [-1, 0, 1, -1, 0, 1, -1, 0, 1],
  y: [-1, -1, -1, 0, 0, 0, 1, 1, 1],
  values: {
   median: [1, 2, 3, 4, 5, 4, 3, 2, 1],
   lower68: [-3, -1, 1, 1, 4, 2, 1, 0, 0],
   upper68: [4, 6, 7, 8, 9, 7, 5, 4, 2]
  },
  interval: {min: 0, max: 1}
});