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.

Optional properties:

• x is an array of numbers or a set of quantiles.
• y is an array of numbers or a set of quantiles.
• colorPalette is an instance of InteractiveDataDisplay.ColorPalette which allows to get a color from a number. A default palette is used if the property is missed.
• treatAs is either "discrete", "gradient". It is used only if values is one-dimensional array.

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}
});