@visx/stats

The package provides react components for visualizing distributions, such as Box Plots and Violin Plots

Installation

npm install --save @visx/stats

Examples

APIs

#<BoxPlot />

# valueScaleValueOf<Pick<ScaleTypeToD3Scale<number, StringLike, DefaultThresholdInput>, ContinuousDomainScaleType>>required

Scale for converting input values to pixel offsets.

# boxPropsSVGProps<SVGRectElement> | undefined

Props to pass to the box glyph rect.

Default {}

# boxWidthnumber | undefined

Width of the BoxPlot.

Default 10

# children((childRenderProps: ChildRenderProps) => ReactNode) | undefined

Override render function to fully control the rendering of the BoxPlot glyph.

# classNamestring | undefined

Classname to apply to parent group element.

# containerboolean | undefined

Whether to render a container rect element (e.g., to capture mouse events).

Default false

# containerPropsSVGProps<SVGRectElement> | undefined

Props to pass to the container glyph rect if rendered.

Default {}

# fillstring | undefined

Fill color to apply to outlier circles and BoxPlot rect.

# fillOpacitystring | number | undefined

Fill color opacity to apply to outlier circles and BoxPlot rect.

# firstQuartilenumber | undefined

First quartile BoxPlot value.

# horizontalboolean | undefined

Whether the glyph should be rendered horizontally instead of vertically.

# leftnumber | undefined

Left pixel offset of the glyph.

Default 0

# maxnumber | undefined

Maximum BoxPlot value.

# maxPropsSVGProps<SVGLineElement> | undefined

Props to pass to the maximum glyph line.

Default {}

# mediannumber | undefined

Median BoxPlot value.

# medianPropsSVGProps<SVGLineElement> | undefined

Props to pass to the median glyph line.

Default {}

# minnumber | undefined

Minimum BoxPlot value.

# minPropsSVGProps<SVGLineElement> | undefined

Props to pass to the minimum glyph line.

Default {}

# outlierPropsSVGProps<SVGCircleElement> | undefined

Props to pass to the outlier glyph circles.

Default {}

# outliersnumber[] | undefined

Array of outlier values to be rendered.

Default []

# rxnumber | undefined

Rx to apply to BoxPlot rect.

Default 2

# rynumber | undefined

Ry to apply to BoxPlot rect.

Default 2

# strokestring | undefined

Stroke color to apply to outlier circles, BoxPlot rect, and min/median/max lines.

# strokeWidthstring | number | undefined

Stroke width to apply to outlier circles, BoxPlot rect, and min/median/max lines.

# thirdQuartilenumber | undefined

Third quartile BoxPlot value.

# topnumber | undefined

Top pixel offset of the glyph.

Default 0

#<ViolinPlot />

# dataDatum[]required

Data used to draw the violin plot glyph. Violin plot values and counts should be able to be derived from data.

# valueScaleValueOf<Pick<ScaleTypeToD3Scale<number, StringLike, DefaultThresholdInput>, ContinuousDomainScaleType>>required

Scale for converting values to pixel offsets.

# children((providedProps: { path: string; }) => ReactNode) | undefined

Override render function to fully control the rendering of the ViolinPlot glyph.

# classNamestring | undefined

Classname to apply to parent group element.

# count((d: Datum) => number) | undefined

Given an datum, returns the count for it.

# horizontalboolean | undefined

Whether the glyph should be rendered horizontally instead of vertically.

# leftnumber | undefined

Left pixel offset of the glyph.

Default 0

# topnumber | undefined

Top pixel offset of the glyph.

Default 0

# value((d: Datum) => number) | undefined

Given an datum, returns the value for it.

# widthnumber | undefined

Width of the violin plot glyph.

Default 10