Guidelines

Use When

• Representing the statistical correlations between pairs of variables in a set.

Don′t Use When

• Representing the distribution of items across two axis variables, absent of statistical correlation values.
• Displaying the distribution of a set of items relative to three variables, one of which is expressed through the size of the plotted item.

Visual Language

• Always use an even number of ranges within the legend scale, equally split between positive and negative correlation.
• The positive and negative correlation ranges each have a base color, $mds-visualization-color-correlation-positive and $mds-visualization-color-correlation-negative to represent the range including the edge value (1 and −1 respectively). The subsequent ranges in each should utilize tints of the base color. These tints can be adjusted to match the distribution of the number of ranges, i.e., 25% tints could be used with 8 total legend items, while 30% may be more appropriate with 6 total legend items.
• Never assign new base colors to the Correlation Matrix. The base colors should remain consistent across implementations to help recognizability and understanding.
• Use mirroring to duplicate the data allowing for either axis as a starting point for comparison.

Responsiveness

• Correlation matrices will resize to fill the available space. Avoid using them at widths below 300px and heights below 150px as small sizes do not provide enough space for axis values and the legend to properly display.
• When the data cells become too small to contain the text, the cell displays only a color value.

Editorial

• Strive for short, succinct item names that clearly describe the data.

Code Reference

Necessary code documentation can be found in the MBC repository.