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 (opens in a new tab)

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

ScatterSeries (opens in a new tab)

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

ScatterPoint (opens in a new tab)

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

Sankey Plot Sunburst Chart 🆕