Guidelines

Use When

• Displaying the distribution of a set of items relative to three variables, where the third variable is represented through the size of the plotted objects, i.e., Return %, Standard Deviation, and Portfolio Weight.

Don′t Use When

• Displaying the distribution of items relative to only two axis variables. Instead, use a Scatter Plot.
• Showing the statistical correlations among a set of items. 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.
• Colored lines on each axis refer to each plot within the chart, precise axis data values.
• 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 an item in the legend, all 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, including its weight within its holding group.

Responsiveness

• Bubble charts are fully fluid horizontally and vertically.
• The tickers within the bubbles only appear when there is enough room.

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.