Skip to main content

Scatter

The Scatter component is used to display scatter plots. Scatter plots use continuous data for both the x and y axes. They are most useful for comparing two continuous values across many different points.

Encoding

The Scatter component supports many different attributes for mapping data properties to visual representations.

  • color
    • Can be a categorical color scale for categorical mappings or a continuous color scale (sequential or divergent) for numerical mappings
  • lineType
  • lineWidth
  • opacity
  • size

Examples

All the following examples will use the same base chart code:

<Chart data={data}>
<Axis
baseline
grid
position="bottom"
ticks
title="Speed (normal)"
/>
<Axis
baseline
grid
position="left"
ticks
title="Handling (normal)"
/>
<Scatter
dimension="speedNormal"
metric="handlingNormal"
/>
<Legend
highlight
position="right"
title="Weight class"
/>
<Title text="Mario Kart 8 Character Data" />
</Chart>

Color

...
<Scatter {...scatterProps} color="weightClass" />
...

Scatter plot with different colors based on weight class Scatter plot with different colors based on weight class

Continuous color scale

...
<Scatter {...scatterProps} color="weight" colorScaleType="linear" />
...

Scatter plot with different colors based on weight Scatter plot with different colors based on weight

Size

...
<Scatter {...scatterProps} size="weight" />
...

Scatter plot with different symbol sizes based on weight Scatter plot with different symbol sizes based on weight

Tooltips and Popovers

Scatter supports ChartTooltip and ChartPopover like all other chart mark components.

Tooltip

<Chart data={data}>
<Axis
baseline
grid
position="bottom"
ticks
title="Speed (normal)"
/>
<Axis
baseline
grid
position="left"
ticks
title="Handling (normal)"
/>
<Scatter
dimension="speedNormal"
metric="handlingNormal"
color="weightClass"
>
<ChartTooltip>
{
(item) => (
<Content>
<Flex direction="column">
<div style={{ fontWeight: 'bold' }}>{(item.character as string[]).join(', ')}</div>
<div>
Speed (normal): {item.speedNormal}
</div>
<div>
Handling (normal): {item.handlingNormal}
</div>
</Flex>
</Content>
)
}
</ChartTooltip>
</Scatter>
<Legend
highlight
position="right"
title="Weight class"
/>
<Title text="Mario Kart 8 Character Data" />
</Chart>

Scatter plot with a tooltip displayed on one of the points Scatter plot with a tooltip displayed on one of the points

Trendlines

The Trendline component is fully supported by Scatter. To plot a trendline, simply pass the Trendline component into Scatter as a child.

Scatter plot with vertical and horizontal median lines Scatter plot with vertical and horizontal median lines

Props

nametypedefaultdescription
childrenChartTooltip | ChartPopover | TrendlineOptional elements that can be rendered within the chart.
colorstring | {value: ColorValue}'series'Symbol color.
If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a color from the color scale.
If an object with a value is provided, this will set the color for all symbols.
colorScaleType'linear' | 'ordinal''linear'The scale type for the color scale. If the backing data for color is continuous (non-binned numerical data) then this should be linear which will calculate the color of the point based on the number in the data, using the linear color scale (color gradient).
If the backing data is ordinal (ex. string data), then this should be 'ordinal' which will assign colors based on the order of the data passed in. There is no interpolation of color values in ordinal scales.
dimensionstring'datetime'The key in the data that the metric is trended against. This is the x-axis for a scatter plot.
lineTypestring | {value: LineType | number[]}Scatter point line type (dasharray).
If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a line type from the lineTypes scale.
If an object with a value is provided, this will set the line type for all symbols.
lineWidthstring | {value: LineWidth | number}Scatter point border line width in pixels.
If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to a line width from the line widths scale.
If an object with a value is provided, this will set the line width for all symbols.
metricstring'value'The key in the data that is used for the value of the data point. this is the y-axis for a scatter plot.
namestringScatter name. Useful for if you need to traverse the chart object to find the scatter plot marks.
opacitystring | {value: number}{value: 1}If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to an opacity from the opacity scale.
If an object with a value is provided, this will set the opacity for all symbols.
sizestring | {value: SymbolSize | number}{value: 'M'}Scatter point symbol size.
If a string is provided, this string is the key in the data that symbols will be grouped into series by. Each unique value for this key in the provided data will map to an size from the symbol size scale.
If an object with a value is provided, this will set the size for all symbols.

Advanced

ScatterPath

The ScatterPath component can be passed into Scatter as a child. This allows you to draw a continuous path connecting points on the scatter plot. The width of the path can vary from point to point.

Example

This plot is using the ScatterPath component to draw "comets" that help visually connect the "before" and "after" state of components.

Scatter plot with paths connecting past points to their present counterparts Scatter plot with paths connecting past points to their present counterparts

<Chart {...chartProps}>
{...chartComponents}
<Scatter
color="segment"
dimension="dauPercent"
lineType="period"
lineWidth={{
value: 1
}}
metric="countAvg"
opacity="period"
>
{...scatterChildren}
<ScatterPath
groupBy={['event', 'segment']}
opacity={0.2}
pathWidth="trailSize"
/>
</Scatter>
</Chart>

Props

nametypedefaultdescription
colorColorValue'gray-500'The color of the path. Can be a css color value or a spectrum color name.
groupBystring[]List of keys that defines what data must be in common to draw a connecting path.
For example, if groupBy={['weightClass', 'type']} then each point with the same weight class and type will have a path drawn connecting them.
pathWidthstring | {value: PathWidth | number}{value: 'M'}The width of the path.
If a string is provided, this string is the key in the data. Each value for this key in the provided data will map to a width from the path width scale.
If an object with a value is provided, this will set the width for all paths.
opacitynumber0.5The fill opacity of the path.