dc.js

Class: HeatMap

HeatMap

A heat map is matrix that represents the values of two dimensions of data using colors.

new HeatMap(parent [, chartGroup])

Create a Heat Map

Parameters:
Name Type Argument Description
parent String | node | d3.selection

Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup String <optional>

The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Mixes In:
Source:
Example
// create a heat map under #chart-container1 element using the default global chart group
var heatMap1 = new HeatMap('#chart-container1');
// create a heat map under #chart-container2 element using chart group A
var heatMap2 = new HeatMap('#chart-container2', 'chartGroupA');

Classes

HeatMap

Methods

boxOnClick( [handler])

Gets or sets the handler that fires when an individual cell is clicked in the heatmap. By default, filtering of the cell will be toggled.

Parameters:
Name Type Argument Description
handler function <optional>
Source:
Returns:
Type
function | HeatMap
Example
// default box on click handler
chart.boxOnClick(function (d) {
    var filter = d.key;
    events.trigger(function () {
        _chart.filter(filter);
        _chart.redrawGroup();
    });
});

colOrdering( [colOrdering])

Get or set a comparator to order the columns. Default is d3.ascending.

Parameters:
Name Type Argument Description
colOrdering function <optional>
Source:
Returns:
Type
function | HeatMap

cols( [cols])

Gets or sets the keys used to create the columns of the heatmap, as an array. By default, all the values will be fetched from the data using the key accessor.

Parameters:
Name Type Argument Description
cols Array.<(String|Number)> <optional>
Source:
Returns:
Type
Array.<(String|Number)> | HeatMap

colsLabel( [labelFunction])

Set or get the column label function. The chart class uses this function to render column labels on the X axis. It is passed the column name.

Parameters:
Name Type Argument Default Description
labelFunction function <optional>
 function(d) { return d; }
Source:
Returns:
Type
function | HeatMap
Example
// the default label function just returns the name
chart.colsLabel(function(d) { return d; });

rowOrdering( [rowOrdering])

Get or set a comparator to order the rows. Default is d3.ascending.

Parameters:
Name Type Argument Description
rowOrdering function <optional>
Source:
Returns:
Type
function | HeatMap

rows( [rows])

Gets or sets the values used to create the rows of the heatmap, as an array. By default, all the values will be fetched from the data using the value accessor.

Parameters:
Name Type Argument Description
rows Array.<(String|Number)> <optional>
Source:
Returns:
Type
Array.<(String|Number)> | HeatMap

rowsLabel( [labelFunction])

Set or get the row label function. The chart class uses this function to render row labels on the Y axis. It is passed the row name.

Parameters:
Name Type Argument Default Description
labelFunction function <optional>
 function(d) { return d; }
Source:
Returns:
Type
function | HeatMap
Example
// the default label function just returns the name
chart.rowsLabel(function(d) { return d; });

xAxisOnClick( [handler])

Gets or sets the handler that fires when a column tick is clicked in the x axis. By default, if any cells in the column are unselected, the whole column will be selected, otherwise the whole column will be unselected.

Parameters:
Name Type Argument Description
handler function <optional>
Source:
Returns:
Type
function | HeatMap

xBorderRadius( [xBorderRadius])

Gets or sets the X border radius. Set to 0 to get full rectangles.

Parameters:
Name Type Argument Default Description
xBorderRadius Number <optional>
 6.75
Source:
Returns:
Type
Number | HeatMap

yAxisOnClick( [handler])

Gets or sets the handler that fires when a row tick is clicked in the y axis. By default, if any cells in the row are unselected, the whole row will be selected, otherwise the whole row will be unselected.

Parameters:
Name Type Argument Description
handler function <optional>
Source:
Returns:
Type
function | HeatMap

yBorderRadius( [yBorderRadius])

Gets or sets the Y border radius. Set to 0 to get full rectangles.

Parameters:
Name Type Argument Default Description
yBorderRadius Number <optional>
 6.75
Source:
Returns:
Type
Number | HeatMap