Appearance
Charts > Scatter plot
A scatter plot is a graphical representation of individual data points on a two-dimensional plane, where each point represents the values of two variables, displaying the relationship or distribution between them.
The Chart
IMDb Scores vs. Episode Viewership in The Simpsons' "Treehouse of Horror" Halloween episodes. Source: Data World
Download example CSV
Copy HTML
Playground
Data
Allow zooming and panning
Allow brushing to select dots
Show ref lines for median
Show regression line
Show confidence band
Show axis from value 0
Animation
Duration of animation in ms
Easing curve (D3)
Style
Color of dots
Show grid lines in background
Usage Example (with tooltip)
vue
<template>
<ScatterPlot
:data="data"
class="h-[500px]"
@hover="setTooltip"
@zoom="setZoom"
/>
<OTTooltip :info="tooltip">
<p class="font-semibold">{{ tooltip.name }}</p>
</OTTooltip>
</template>
<script setup>
import useTooltip from "@/functions/useTooltip.js";
const [tooltip, setTooltip] = useTooltip();
</script>Component API
Data
js
[
{ id: "1", name: "Name 1", x: 10, y: 20, value: 1 },
{ id: "2", name: "Name 2", x: 20, y: 30, value: 1 },
{ id: "3", name: "Name 3", x: 5, y: 10, value: 1 },
{ id: "4", name: "Name 4", x: 20, y: 15, value: 1 },
{ id: "5", name: "Name 5", x: 30, y: 30, value: 1 },
{ id: "6", name: "Name 6", x: 30, y: 20, value: 1 },
{ id: "7", name: "Name 7", x: 40, y: 35, value: 1 },
...
],Props
| Name | Default | Description | Type |
|---|---|---|---|
| data | [] | The dataset | Array |
| margin | { top: 8, right: 8, bottom: 12, left: 12 } | The margin on each side of the chart in px | Object |
| dotSize | [5, 5] | The min and max size of dots (to encode value as size) | Array |
| dotOpacity | 0.8 | The transparency of dots | Number |
| color | #6B7280 | The color of dots | String |
| strokeColor | null | The stroke around dots | String |
| strokeOpacity | 0.5 | The transparency of stroke around dots | Number |
| gridColor | #E5E7EB | The color of the grid lines | String |
| showGrid | true | Whether or not to show grid lines | Boolean |
| refLineColor | #6B7280 | The color of the reference lines | String |
| strokeDasharray | 3,2 | The dash pattern for ref lines | String |
| ease | easeCubic | The easing function for animation | String |
| duration | 300 | The total time of the animation in ms | Number |
| xDomain | null | The min and max values for x axis (computed from data if not given) | Array |
| yDomain | null | The min and max values for y axis (computed from data if not given) | Array |
| xTickFormat | null | The format function for x axis values | Function |
| yTickFormat | null | The format function for y axis values | Function |
| xTickFormatHover | null | The format function for hovered value on x axis | Function |
| yTickFormatHover | null | The format function for hovered value on y axis | Function |
| xTicks | null | The number of ticks on the x axis | Number |
| yTicks | null | The number of ticks on the y axis | Number |
| showMedianLines | true | Whether or not to show reference lines for the median | Boolean |
| showRegressionLine | false | Whether or not to show a regression line | Boolean |
| xScaleType | scaleLinear | The type of scale to use for the x axis | String |
| highlighted | null | The id of the highlighted dot | String |
| transformValues | { k: 1, x: 0, y: 0 } | The scale and translate values for programmatic zooming | Object |
| allowBrush | false | Whether or not to allowing brushing interactions | Boolean |
| allowZoom | false | Whether or not to allow zoom and panning interactions | Boolean |
| sizeByValue | false | Whether or not to size dots based on their value | Boolean |
| isMiniMap | false | Whether or not to use as mini map | Boolean |
| showFlagsOnHover | false | Whether or not to show a flag when hovering a dot | Boolean |
| selected | null | The id of the selected dot | String | Number |
| refLines | null | The coords of reference lines | Array |
| axisNice | false | Whether to round axes domains to nice values | Boolean |
Events
| Name | Argument | Description |
|---|---|---|
| @select | { target, data } | Emitted when dot is clicked |
| @hover | { target, data } \null | Emitted when dot is hovered |
| @zoom | { transform, xDomain, yDomain } | Emitted when chart is zoomed or panned |
| @brush | { data, target } \ null | Emitted when chart is brushed |
| @hoverRegressionLine | { data: r-squared } \null | Emitted when regression line is hovered |
Dependencies
- d3
- d3-regression
- useRegression