Guidelines

Use When

• Displaying the distribution of a set of items relative to two axis variables.

Don′t Use When

• Displaying the distribution of a set of items relative to three variables, one of which is expressed through the size of the plotted item. Instead, use a Bubble chart.
• Representing the statistical correlations between pairs of variables in a set. Instead, use a Correlation Matrix.

Visual Language

• Never use colors other than those defined in the visualization palette.
• Always use the relevant color orders and meanings from the visualization palette.
• Use hover crosshairs when it is important to be able to see a plotted item’s exact placement on each axis.

Behaviors

• When hovering over items within the legend, the plotted items associated with that item become opaque, while all other plotted items and legend items fade back.
• When hovering over a plotted item, the plotted item and its matching legend item become opaque, while all other plotted items and legend items fade back. A tooltip appears, surfacing the underlying data values of the holding.

Responsiveness

• Within container widths of 600px or less, the chart’s legend displays at the top, and the internal padding between elements tightens.

Editorial

• Strive for short, succinct axis labels and legend items that clearly describe the data.
• Include the unit or increment in axis labels.

Code Reference

Necessary code documentation can be found in the MBC repository.