Radial Scatter Plot

A Radial or Circular Scatter Plot in REAVIZ is used for displaying circular data by wrapping the usual scatter plot around a circle. Each point in the chart is positioned according to its data values, with the distance from the center representing the data's magnitude.

Types supported by reaviz:

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

Where to use:

Display Circular Data: Ideal for representing data in a circular format.
Visualize Relationships: Useful for visualizing relationships between multiple data points.
Highlight Data Patterns: Great for identifying patterns and trends in data.

Quick Start

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



import {
  RadialScatterPlot,
  RadialScatterSeries,
  RadialScatterPoint,
  RadialAxisTickSeries,
  RadialAxis,
  RadialAxisTick,
  RadialAxisTickLine,
  RadialAxisArcSeries
} from 'reaviz';


export default function App() {
  const data = [
    {
      id: "3",
      key: new Date("2020-02-07T08:00:00.000Z"),
      data: 39,
    },
    {
      id: "2",
      key: new Date("2020-03-01T08:00:00.000Z"),
      data: 98,
    },
    {
      id: "1",
      key: new Date("2020-03-12T08:00:00.000Z"),
      data: 17,
    }
  ];


  return (
    <RadialScatterPlot
      height={300}
      width={300}
      data={data}
      innerRadius={40}
      series={
        <RadialScatterSeries
          point={
            <RadialScatterPoint
              size={5}
              color="rgba(45, 96, 232, .8)"
            />
          }
        />
      }
      axis={
        <RadialAxis
          ticks={
            <RadialAxisTickSeries
              count={5}
              tick={
                <RadialAxisTick
                  line={<RadialAxisTickLine
                  position="inside" />}
                />
              }
            />
          }
          arcs={<RadialAxisArcSeries count={5} />}
        />
      }
    />
  );
}


import {
  RadialScatterPlot,
  RadialScatterSeries,
  RadialScatterPoint,
  RadialAxisTickSeries,
  RadialAxis,
  RadialAxisTick,
  RadialAxisTickLine,
  RadialAxisArcSeries
} from 'reaviz';

export default function App() {
  const data = [
    {
      id: "3",
      key: new Date("2020-02-07T08:00:00.000Z"),
      data: 39,
    },
    {
      id: "2",
      key: new Date("2020-03-01T08:00:00.000Z"),
      data: 98,
    },
    {
      id: "1",
      key: new Date("2020-03-12T08:00:00.000Z"),
      data: 17,
    }
  ];

  return (
    <RadialScatterPlot
      height={300}
      width={300}
      data={data}
      innerRadius={40}
      series={
        <RadialScatterSeries
          point={
            <RadialScatterPoint
              size={5}
              color="rgba(45, 96, 232, .8)"
            />
          }
        />
      }
      axis={
        <RadialAxis
          ticks={
            <RadialAxisTickSeries
              count={5}
              tick={
                <RadialAxisTick
                  line={<RadialAxisTickLine
                  position="inside" />}
                />
              }
            />
          }
          arcs={<RadialAxisArcSeries count={5} />}
        />
      }
    />
  );
}

Examples

Scatter

Bubble

API

RadialScatterPlot (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<RadialScatterSeriesProps, FC<Partial<RadialScatterSeriesProps>>>`
`axis`	The radial axis component for the chart. `ReactElement<RadialAxisProps, FC<Partial<RadialAxisProps>>>`
`innerRadius`	The inner radius for the chart center. `number`
`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`

RadialScatterSeries (opens in a new tab)

Prop	Description	Default
`point`	Point that is rendered. `ReactElement<RadialScatterPointProps, FC<Partial<RadialScatterPointProps>>>`	`<RadialScatterPoint />`
`xScale`	D3 scale for X Axis. Set internally by `RadialScatterPlot`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `RadialScatterPlot`. `any`
`data`	Parsed data shape. Set internally by `RadialScatterPlot`. `ChartInternalShallowDataShape[]`
`id`	Id set internally by `RadialScatterPlot`. `string`
`animated`	Whether to animate the enter/update/exit. `boolean`	`true`
`activeIds`	Active element ids to highlight. `string[]`
`show`	When to show the point. `boolean`	`true`
`valueMarkers`	Value markers line for the chart. `ReactElement<RadialValueMarkerProps, FC<RadialValueMarkerProps>>[]`

RadialScatterPoint (opens in a new tab)

Prop	Description	Default
`data`	Parsed data shape. Set internally by `RadialScatterPlot`. `ChartInternalShallowDataShape`
`index`	Index of the element in the series. Set internally by `RadialScatterSeries`. `number`
`animated`	Whether the element is active or not. Set internally by `RadialScatterSeries`. `boolean`
`xScale`	D3 scale for X Axis. Set internally by `RadialScatterPlot`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `RadialScatterPlot`. `any`
`fill`	Fill for the element. `string`
`id`	Id set internally by `RadialScatterPlot`. `string`
`color`	Color of the circle. `any`	`schemes.cybertron[0]`
`className`	CSS classes to apply. `any`
`active`	Whether the element is active or not. Set internally by `RadialScatterSeries`. `boolean`	`true`
`visible`	Whether the elment is visiblbe or not. `(value: any, index: any) => boolean`
`symbol`	Symbol element to render. `(value: any) => ReactNode`
`size`	Size of the circle element. `number \| ((d: any) => number)`	`3`
`tooltip`	Tooltip element. `ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>>`	`<ChartTooltip />`
`onClick`	Event for when a symbol is clicked. `(event: any) => void`	`() => undefined`
`onMouseEnter`	Event for when the symbol has mouse enter. `(event: any) => void`	`() => undefined`
`onMouseLeave`	Event for when the symbol has mouse leave. `(event: any) => void`	`() => undefined`

Radial Gauge Sankey Plot