Product Name

Scatter Plot

Scatter Plot charts show the distribution of items relative to two axis variables.

Scatterplot Chart

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.

©2017 Morningstar, Inc. All rights reserved. Terms of Use