Scatter plots are useful for comparing the relationship of two metrics across many items.
When the size of the points in a scatter plot are mapped to a metric, it becomes a bubble chart. A size legend is required to help users understand the size scale.
When the color of the points in a scatter plot are mapped to a dimension, use the Spectrum categorical 6-color palette. Limit the number of categories to no more than 6 and include a legend to help users identify the meaning of the colors. View the Color for data visualization and Legend pages for more information on using color.
When the color of the points in a scatter plot are mapped to a ratio scale, use a continuous sequential color palette. When metrics are binned, use a binned sequential color palette. Include a legend to help users identify the meaning of the colors. View the Color for data visualization and Legend pages for more information on using color.
A trend line bisects the points in a scatter plot, dividing half above and half below the line. This can be helpful in identifying an overall pattern. When color is mapped to a dimension, a trend can be added for each color.
When comparing categories, it can be useful to arrange them into a grid. Be sure that all charts have the same scale.
Hovering over a point on the scatter plot causes all other points to fade back from the view. A tooltip displays the name of the point as well as any correlating values. It can also include metadata such as an image, description, or information that is not shown on the chart.
Points can be interactive. When they are, leverage a selected state and surface relevant actions in a panel, rail, or floating menu.
A scatter plot can be navigated using a keyboard. Focus begins with the entire chart and moves from left to right. A blue border is applied to the point in focus.
Users should be able to zoom in and out of a scatter plot with a scroll action, much like they would on a map. Include a control to reset the zoom to the default view position.
Users should be able to pan over a scatter plot by clicking and dragging within its bounds, much like they would on a map. Include a control to reset the pan to the default view position.
The chart title or other surrounding elements should help a user understand if any points are excluded from the scatter plot.
Charts often require time to load, so include a loading state.
When data returns null (blank) values, those values should be excluded. Excluded values should be explained using non-removable tags.
When there is no data available, a chart should indicate as such and give direction as to how to make data appear there. Do not render an empty chart.
There are occasionally errors with fetching data. When this happens, give users a helpful, actionable explanation of what happened and what they can do to fix things. Do not render an empty chart.
Color should only be used to help make pattern detection easier. Do not use color as a way to label each point.
One of the advantages of a scatter plot is its ability to show many points — thousands if needed — and still remain legible and performant. Don’t exclude data points unless they’re truly not needed. If any data points are excluded, identify how many in a tag below the chart.
The size of points should be optimized based on the size of the chart and the number of points there are to display.
A point’s position on a scatter plot is essential to its readability. This often means that points will overlap. In order to help visualize this overlap, scatter plots should use a 100% opacity with a “multiply” blend mode. This is the best way to visualize the density of overlapping points.
Transparency should only be used when the “multiply” blend mode is not an option. It’s not as useful as multiply, but is still better than completely opaque points.
Shapes as scatter plot points can be difficult to tell apart, especially when they overlap. Use colors or small multiples when you need to show how a scatter plot relates across dimensions.
Scatter plots can be very data rich. Support exploration by allowing users to zoom in and out of the plot. This is also important when users need to make a precise selection.
To maximize the usability of a scatterplot, use a hidden Voronoi map to determine the click/hover area for each point.
Even with axis labels, scatter plots can be difficult to understand. Add zone labels to parts of a scatterplot to make it easier for users to understand the chart.
|Right Arrow||Moves focus forward to the next point. If focus is already on the last point or there are no points, the focus does not move.|
|Left Arrow||Moves focus to the previous point. If focus is already on the first point or there are no points, the focus does not move.|
|Home||Moves focus to the first point of the chart.|
|End||Moves focus to the last point of the chart.|
|Space or Enter||Triggers the selection state of a point.|
|Mar 04, 2020||1.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.