A heat map (or heatmap) is a two-dimensional graphical representation of data where the individual values contained in a matrix are represented as colors.

Heatmap extends Chart.

#Demo Online demo

Sample usage

Heatmap is created using an ODCD3.Heatmap function:

var placeholderSelector = "#plot";
var data = [ ... ]; // array of arrays/objects 
var config = { //optional config object
    ...
};

var plot = new ODCD3.Heatmap(placeholderSelector, data, config);  

#Configuration

The ODCD3.Heatmap function takes 3 parameters:

1. selector for plot placeholder element - d3.select compatible (string or node)
2. data to plot (array of arrays / objects)
3. optional config object

Configuration object properties (not inherited from base Chart configuration):

• width - svg width (default: computed using cell width and margins)
• height - svg height (default: computed using cell height and margins)
• x - X axis configuration object:
  • title - axis title, default: ''
  • key - object property name or array index with X axis value, default: 0
  • rotateLabels - rotate labels by -45 degrees, default: true,
  • sortLabels - default: false,
  • sortComparator - comparator function used for sorting labels, default:

  
        (a, b) => Utils.isNumber(a) ? a - b : a.localeCompare(b)
  

  • groups - grouping configuration object, described in a paragraph below,
  • formatter - optional custom tick label formatter function,
  • value - X value accessor function, may be used to override default accessor ('this' is set to the configuration object):

      d => d[this.x.key]

• y - Y axis configuration object:
  • title - axis title, default: ''
  • key - object property name or array index with Y axis value, default: 1
  • rotateLabels - rotate labels by -45 degrees, default: true,
  • sortLabels - default: false,
  • sortComparator - comparator function used for sorting labels, default:

  
        (a, b) => Utils.isNumber(a) ? a - b : a.localeCompare(b)
  

  • groups - grouping configuration object, described in a paragraph below,
  • formatter - optional custom tick label formatter function,
  • value - Y value accessor function, may be used to override default accessor ('this' is set to the configuration object):

       d => d[this.y.key]

• z - Z (color) axis configuration object:
  • key - object property name or array index with axis value, default: 2
  • decimalPlaces - displayed value decimal places, default: undefined (original data format)
  • formatter - displayed value formatter function, may be used to override default,
  • value - value accessor function, may be used to override default accessor ('this' is set to the configuration object):

      d => d[this.z.key]

• cell - object containing plot cell configuration:
  • width - cell width, default: undefined (cell width is computed),
  • height - cell height, default: undefined (cell height is computed),
  • sizeMin - min computed cell size (width and height), default: 15,
  • sizeMax - max computed cell size (width and height), default: 250,
  • padding - padding between cells, default: 0
• color - object containing cell color configuration:
  • noDataColor - cell color if there is no data available, default: white
  • scale - scale, default: linear,
  • range - color range, default: ["darkblue", "lightskyblue", "orange", "crimson", "darkred"],
• showTooltip - show tooltip on dot hover, boolean (default: true)
• showLegend - show legend, boolean (default: true)
• highlightLabels - highlight labels on cell hover, boolean (default: true)
• margin - object containing plot margins:
  • left - default: 60
  • right - default: 50
  • top - default: 30
  • bottom - default: 80
• legend - legend configuration object:
  • width - legend width, default: 30
  • decimalPlaces - tick value decimal places, default: undefined (original data format)
  • formatter - tick value formatter function, may be used to override default ('this' is set to the configuration object):

      v => this.legend.decimalPlaces === undefined ? v : Number(v).toFixed(this.legend.decimalPlaces)

#Grouping data

Grouping configurations object properties:

• keys - array of grouping variable keys in datum (object properties / array indices)
• labels - optional array of grouping variable labels
• value - optional grouping variable value accessor function, may be used to override default accessor:

  
        function (datum, key) {
           return datum[key];
        }
  

Example:

{
      keys: [2, 3],
      labels: ["Animal species", "Breed"]
}

or

{
      keys: ["species", "breed"],
      labels: ["Animal species", "Breed"]
}

Data format

Array of arrays or objects, e.g.:

var data = [
    [1, 2, 'dog', 'terrier'],
    [2, 3, 'cat', 'bengal'],
    [3, 4, 'dog', 'bulldog']
];

or

var data = [
    {a: 1, b: 2, species: 'dog', breed: 'terrier'},
    {a: 2, b: 3, species: 'cat', breed: 'bengal'},
    {a: 3, b: 4, species: 'dog', breed: 'bulldog'},
];