Adobe Logo

Spectrum

Version 2.0.0

Scatter plot

Scatter plots are useful for comparing the relationship of two metrics across many items.

Scatter plot with a single metric with unique visitors on the y-axis and a binned metric with time per visit in seconds on the x-axis. Each point is mapped to a Spectrum website page name.Scatter plot with a single metric with unique visitors on the y-axis and a binned metric with time per visit in seconds on the x-axis. Each point is mapped to a Spectrum website page name.

Table of contents#

Anatomy#

Image illustrating through labels the component parts of a scatter plot, including the axis titles, axis labels, gridlines, and points.Image illustrating through labels the component parts of a scatter plot, including the axis titles, axis labels, gridlines, and points.

Options#

Key example of a standard scatter plot with unique visitors on the y-axis, time per visit in seconds on the x-axis, and points mapped to website page name.

Scatter plot#

A standard scatter plot has two metrics, one metric mapped to each axis. Points are mapped to a dimension that dictates the level of detail.

Key example of a scatter plot that maps the size of the points to the time per visitor spent in seconds on each website page.

Bubble chart variant#

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.

Key example of a scatter plot that color codes the dimension Website sections in seafoam, indigo, orange, magenta, and purple and displays a corresponding categorical color legend to the right of the chart.

Categorical color#

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.

Key example of a scatter plot that color codes the time spent per visitor in seconds with the viridis sequential color scale and displays a corresponding sequential color legend to the right of the chart.

Sequential 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.

Key example of a scatter plot that displays a single trend line bisecting the points on the chart.

Trend line#

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.

Key example of a small multiple scatter plot with unique visitors on the y-axis, time per visit in seconds on the x-axis, and broken down into three small multiple charts along the x-axis for three website sections, Components, Foundation, and Patterns.

Small multiple #

When comparing categories, it can be useful to arrange them into a grid. Be sure that all charts have the same scale.

Behaviors#

Key example of a point on a scatter plot being hovered on. Points not hovered on fade back, and a tooltip appears above the point displaying the detailed information. Tooltip text, Components: Actions: Button. 1,331 unique visitors, 130 seconds.

Hover#

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.

Key example of a point that has been selected. Unselected points turn gray and any available actions appear in a floating action bar at the bottom of the screen, or in a panel or rail.

Selection#

Points can be interactive. When they are, leverage a selected state and surface relevant actions in a panel, rail, or floating menu.

Key example of a scatter plot comparing unique visitors to a website and time per visit in seconds, with one point receiving focus. Selected point has a focus state plus a gray tooltip above the focused point. Tooltip text, Components: Button. 1,331 unique visitors, 130 seconds.

Focus#

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.

Key example of a scatter plot that has been zoomed by the user, with a floating quick action bar in the top, right corner of the chart that includes controls to zoom in, zoom out, and reset the zoom view.

Zoom#

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.

Key example of a scatter plot being panned by a user, represented by a cursor change to an open hand cursor.

Pan#

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.

Key example of a scatter plot that has excluded 5 points from its display, indicated through a tag below the chart that reads Excluded: 5 data points. The user has the ability to cancel with a close affordance in the tag.

Excluded items#

The chart title or other surrounding elements should help a user understand if any points are excluded from the scatter plot.

Key example of a chart in the ghost loading state.

Loading#

Charts often require time to load, so include a loading state.

Key example of a scatter plot that has returned null values, which are treated as zeros and omitted from the chart. The number of omitted values are displayed below the scatter plot in a tag that reads Excluded: 2 null values.

Null values#

When data returns null (blank) values, those values should be excluded. Excluded values should be explained using non-removable tags.

Key example of an empty chart, so all that shows is a chart icon with the text “No data available.” and an action to link a dataset.

Empty state#

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.

Key example of what happens when there has been an error when fetching data. An error icon appears in place of the chart with the text “Unable to load chart.”, and the option to reload.

Error state#

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.

Usage guidelines#

Don't give each point a unique color#

Color should only be used to help make pattern detection easier. Do not use color as a way to label each point.

Key example of a scatter plot correctly using a single color to display all points.
Key example of a scatter plot incorrectly using a different color for each point.

Show all points#

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.

Key example of a scatter plot correctly displaying all points.

Consider point size#

The size of points should be optimized based on the size of the chart and the number of points there are to display.

Key example of a scatter plot that optimizes the size of the points based on the size of the chart to increase readability.
Key example of a scatter plot in which the points are too large, making it difficult to parse.

Use "multiply" blend mode#

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.

Key example of the multiply blend mode, showing the increase in darkness as points overlap.
Key example of a change in opacity without the multiply blend mode, showing an increase in difficulty distinguishing individual points as they start to overlap.

Use transparency as a fallback#

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.

Key example of a change in opacity without the multiply blend mode, showing increased difficulty distinguishing individual points as they start to overlap compared to multiply mode, but easier to parse than opaque dots.
Key example of a scatter plot with opaque points, making it difficult or even impossible to see overlapping points.

Don't use shapes#

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.

Key example of a scatter plot correctly using a single shape for all points.
Key example of a scatter plot using shape to encode a dimension, making the chart extremely difficult to parse.

Support zooming and panning#

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.

Key example of a scatter plot that has been zoomed and panned with a quick action bar including the select, pan, zoom in, zoom out, and reset icons.

Use a Voronoi hitbox#

To maximize the usability of a scatterplot, use a hidden Voronoi map to determine the click/hover area for each point.

Key example of a scatter plot with each point divided into an invisible Voronoi hitbox to determine the hit area for each point.

Provide context by labeling zones#

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.

Key example of a scatterplot showing percent change in revenue on the x-axis and percent change in cost on the y-axis. The chart has been split into four quadrants with large grid lines and each quadrant is labeled - top left - lower than expected, top right - expected, bottom left - expected, bottom right - higher than expected.

Keyboard interactions#

KeyInteraction
Right ArrowMoves 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 ArrowMoves focus to the previous point. If focus is already on the first point or there are no points, the focus does not move.
HomeMoves focus to the first point of the chart.
EndMoves focus to the last point of the chart.
Space or EnterTriggers the selection state of a point.

Resources#

The Stanford Visualization Group: imMens
Using a d3 voronoi grid to improve a chart's interactive experience

Changelog#

DateNumberNotes
Apr 06, 20222.0.0
  • Updated all colors to 6.0.0
Mar 04, 20201.0.0
  • This component has been added to the website

Design checklist#

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Content design

UI language and information design considerations have been incorporated into component design.

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.