A correlation matrix is a matrix showing the correlations between all pairs of given variables. The correlation matrix of n variables X1, ..., Xn is the n × n matrix whose i,j entry represents correlation of Xi and Xj.

Correlation matrix extends Chart.

#Demo Online demo

Sample usage

Correlation matrix is created using an ODCD3.CorrelationMatrix function:

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

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

#Configuration

The ODCD3.CorrelationMatrix function takes 3 parameters:

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

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

• width - svg width (default: computed using cell size and margins)
• showTooltip - show tooltip on dot hover, 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: 60
• variables - plot variables configuration object:
  • labels - array of variable labels (for the diagonal of the plot)
  • keys - optional array of variable keys in datum (object properties / array indices), used for selecting plot variables
  • value - variable value accessor function, may be used to override default accessor:

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

• cell - object containing plot cell configuration:
  • shape - shape, available values: rect, circle, ellipse; default: ellipse
  • size - cell size, default: undefined (cell size is computed),
  • sizeMin - min computed cell size, default: 15,
  • sizeMax - max computed cell size, default: 250,
  • padding - padding between cells, default: 1
• correlation - object containing correlation configuration:
  • scale - scale, default: 'linear'
  • domain - domain, default: [-1, -0.75, -0.5, 0, 0.5, 0.75, 1],
  • range - range, default: ["darkblue", "blue", "lightskyblue", "white", "orangered", "crimson", "darkred"],
  • value - function used to compute correlation, may be used to override default:

      function (xValues, yValues) {
         return StatisticsUtils.sampleCorrelation(xValues, yValues);
      }

#Attached scatter plot You can attach a scatterplot shown after clicking the correlation matrix cell using an attachScatterPlot function, eg:

plot.attachScatterPlot("#scatterplot")

The attachScatterPlot function takes 2 parameters:

1. selector for scatterplot container element
2. scatterplot configuration object (optional)

Data format

Array of arrays or objects, e.g.:

var data = [
    [1, 2, 1],
    [2, 3, 2],
    [3, 4, 1]
];

or

var data = [
    {a: 1, b: 2, c: 1},
    {a: 2, b: 3, c: 2},
    {a: 3, b: 4, c: 1},
];