Scatter Plot

A Scatter Plot in REAVIZ is a type of mathematical diagram using Cartesian coordinates to display values for two variables in a dataset. Each data point is represented as a dot, where the horizontal axis represents one variable and the vertical axis represents another.

Types supported by reaviz:

Scatter - Displays individual data points in a Cartesian coordinate system.
Bubble - Similar to scatter, but with points sized according to a third data dimension.

Where to use:

Show Relationships: Ideal for visualizing relationships between two variables.
Identify Patterns: Useful for identifying patterns, trends, and correlations in data.
Highlight Outliers: Great for spotting outliers and anomalies in data.

Quick Start

To create a Bar chart, use import the ScatterPlot and give it data. The chart will automatically configure itself with the default options exposed via props.

import { ScatterPlot } from 'reaviz';


export default function App() {
return (
  <ScatterPlot
    height={300}
    width={300}
    data={[
      { key: new Date('11/29/2019'), data: 7 },
      { key: new Date('11/30/2019'), data: 5 },
      { key: new Date('12/1/2019'), data: 10 },
      { key: new Date('12/2/2019'), data: 9 },
      { key: new Date('12/3/2019'), data: 12 }
    ]}
  />
);
}

import { ScatterPlot } from 'reaviz';

export default function App() {
return (
  <ScatterPlot
    height={300}
    width={300}
    data={[
      { key: new Date('11/29/2019'), data: 7 },
      { key: new Date('11/30/2019'), data: 5 },
      { key: new Date('12/1/2019'), data: 10 },
      { key: new Date('12/2/2019'), data: 9 },
      { key: new Date('12/3/2019'), data: 12 }
    ]}
  />
);
}

Examples

Scatter

Bubble

API

ScatterPlot

Name	Type	Default
`data`	`ChartShallowDataShape[]` Data the chart will receive to render.	`[]`
`series`	`ReactElement<ScatterSeriesProps, FC<Partial<ScatterSeriesProps>>>` The series component that renders the scatter components.	`<ScatterSeries />`
`yAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the Y Axis of the chart.	`<LinearYAxis type="value" />`
`xAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the X Axis of the chart.	`<LinearXAxis type="time" />`
`gridlines`	`ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>> \| null` The chart’s background gridlines component.	`<GridlineSeries />`
`brush`	`ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>> \| null` The chart’s brush component.
`zoomPan`	`ReactElement<ChartZoomPanProps, FC<Partial<ChartZoomPanProps>>> \| null` The chart’s zoom pan component.
`secondaryAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]` Any secondary axis components. Useful for multi-axis charts.
`id`	`string` Id of the chart.
`width`	`number` Width of the chart. If not provided will autosize.
`height`	`number` Height of the chart. If not provided will autosize.
`margins`	`Margins` Margins for the chart.
`className`	`string` Classnames for the chart.
`containerClassName`	`string` Classnames for the chart.
`style`	`StyleHTMLAttributes<SVGSVGElement>` Additional css styles.
`center`	`boolean` Center the chart. Used mainly internally.
`centerX`	`boolean` Center chart on X Axis only. Used mainly internally.
`centerY`	`boolean` Center chart on Y Axis only. Used mainly internally.

ScatterSeries

Name	Type	Default
`point`	`ReactElement<ScatterPointProps, FC<Partial<ScatterPointProps>>>` Point that is rendered.	`<ScatterPoint />`
`xScale`	`any` D3 scale for X Axis. Set internally by `ScatterPlot`.
`yScale`	`any` D3 scale for Y Axis. Set internally by `ScatterPlot`.
`data`	`ChartInternalShallowDataShape[]` Parsed data shape. Set internally by `ScatterPlot`.
`id`	`string` Id set internally by `ScatterPlot`.
`height`	`number` Height of the chart. Set internally by `ScatterPlot`.
`width`	`number` Width of the chart. Set internally by `ScatterPlot`.
`isZoomed`	`boolean` Whether the chart has been zoomed or not. Set internally by `ScatterPlot`.
`animated`	`boolean` Whether to animate the enter/update/exit.
`activeIds`	`string[]` Active element ids to highlight.
`valueMarkers`	`ReactElement<LinearValueMarkerProps, FC<LinearValueMarkerProps>>[] \| null` Value markers line for the chart.

ScatterPoint

Name	Type	Default
`active`	`boolean` Whether the element is active or not. Set internally by `ScatterSeries`.	`true`
`size`	`number \| ((data: ChartInternalShallowDataShape) => number)` Size of the circle element.	`4`
`color`	`ColorSchemeType` Color of the circle.	`schemes.cybertron[0]`
`cursor`	`string` Cursor for the element.	`'pointer'`
`xScale`	`any` D3 scale for X Axis. Set internally by `ScatterPlot`.
`yScale`	`any` D3 scale for Y Axis. Set internally by `ScatterPlot`.
`height`	`number` Height of the chart. Set internally by `ScatterPlot`.
`animated`	`boolean` Whether to animate the enter/update/exit. Set internally by `ScatterSeries`.	`true`
`index`	`number` Index of the element in the series. Set internally by `ScatterSeries`.
`tooltip`	`ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>> \| null` Tooltip element.	`<ChartTooltip />`
`data`	`ChartInternalShallowDataShape` Parsed data shape. Set internally by `ScatterPlot`.
`id`	`string` Id set internally by `ScatterPlot`.
`glow`	`Glow` Glow styling for the point.
`symbol`	`(data: ChartInternalShallowDataShape) => ReactNode` Symbol element to render.
`visible`	`(data: ChartInternalShallowDataShape, index: number) => boolean` Whether the elment is visiblbe or not.
`onClick`	`(data: ChartInternalShallowDataShape) => void` Event for when a symbol is clicked.
`onMouseEnter`	`(data: ChartInternalShallowDataShape) => void` Event for when the symbol has mouse enter.
`onMouseLeave`	`(data: ChartInternalShallowDataShape) => void` Event for when the symbol has mouse leave.
`className`	`any` Classnames to apply to the element.
`style`	`any` CSS styles to apply to the element.