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.

Uncertain Data