Heatmap

Using the heatmap chart type.

See the Pen Docs - Heatmap Type by Arthur Puszynski (@jsblog) on CodePen.

Introduction

Heatmap charts have been documented in use as early as the 1800s, through the heatmap term itself is a relatively new addition from the 1980s. JSCharting makes what used to be a week’s long manual task a simple matter with advanced heatmap charts created in minutes.

JavaScript heatmap charts consist of shaded data points within a matrix. Data used with heat maps includes points with x, y, and z values and usually a colormap (smartPalette) to represent the z value. A heatmap requires only one data series. Hovering individual data points shows tooltips with details of each value.

A couple related chart types include choropleth maps: Map Tutorial, treemaps, and calendar heatmaps: Calendar Tutorial .

Setup

The heatmap chart is relatively simple. Besides data, it only requires the type setting and a smartPalette as shown below.

Additionally, X axis and Y axis labels can be used to describe what the x and y values represent. Adding a label for the invisible Z axis will help the chart automatically label values in tooltips.

new JSC.Chart("targetDiv", {
  type: "heatmap",
  palette: {
    colors: ["#ffffcc", "#fd8d3c", "#b00026"],
    pointValue: "{%zValue}"
  },
  xAxis_label_text: "Longitude",
  yAxis_label_text: "Latitude",
  zAxis_label_text: "Heat Delta"
})

SmartPalette

The smartPalette pointValue property can be set to a point token for the z value: '{%zValue}'.

new JSC.Chart("targetDiv", {
  type: "heatmap",
  palette: {
    colors: ["#ffffcc", "#fd8d3c", "#b00026"],
    pointValue: "{%zValue}"
  }
  /*...*/
})

Colors

It is often recommended by the scientific community to use grayscale colors with heatmaps, however, humans are not able to perceive as many shades of gray as they can graduations of color.

Please use the Smart Palette Gallery Sample utility sample to explore a number of predefined gradient color schemes to use with heatmap charts.

For more information on customizing the smartPalette including color scale legends see the SmartPalette Tutorial.

Performance

JSCharting includes a high performance engine to ensure charts render quickly without special settings required. For customers with large data needs, this can be further optimized if required.

Performance of heatmaps that contain many points and use a smartPalette can improve by using a function with the pointValue property.

Another helpful technique to improve performance, is to simplify the data point visual and not use data point shading. By default, all data points use subtle shading but this option can be modified through the chart type setting as shown below. Additionally, point outlines are disabled:

new JSC.Chart("targetDiv", {
  // Solid (non-gradient) shading.
  type: "heatmap solid",
  palette: {
    colors: ["#ffffcc", "#fd8d3c", "#b00026"],
    // Function point z value getter.
    pointValue: function(point) {
      return point.options("z");
    }
  },
  // No point outlines.
  defaultPoint_outline_color: "none"
  /*...*/
})