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

Name	Type	Default
`data`	`ChartShallowDataShape[]` Data the chart will receive to render.
`series`	`ReactElement<RadialScatterSeriesProps, FC<Partial<RadialScatterSeriesProps>>>` The series component that renders the scatter components.
`axis`	`ReactElement<RadialAxisProps, FC<Partial<RadialAxisProps>>> \| null` The radial axis component for the chart.
`innerRadius`	`number` The inner radius for the chart center.
`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.

RadialScatterSeries

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

RadialScatterPoint

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