Data utilities
Umbrella package
@visx/stats
The package provides react
components for visualizing distributions, such as Box Plots and Violin
Plots
Installation
npm install --save @visx/stats
Examples
<BoxPlot /> & <ViolinPlot />
APIs
#<BoxPlot />
ValueOf<Pick<ScaleTypeToD3Scale<number, StringLike, DefaultThresholdInput>, ContinuousDomainScaleType>>
required Scale for converting input values to pixel offsets.
SVGProps<SVGRectElement>
Props to pass to the box glyph rect.
Default {}
number
Width of the BoxPlot.
Default 10
(childRenderProps: ChildRenderProps) => ReactNode
Override render function to fully control the rendering of the BoxPlot glyph.
string
Classname to apply to parent group element.
boolean
Whether to render a container rect element (e.g., to capture mouse events).
Default false
SVGProps<SVGRectElement>
Props to pass to the container glyph rect if rendered.
Default {}
string
Fill color to apply to outlier circles and BoxPlot rect.
ReactText
Fill color opacity to apply to outlier circles and BoxPlot rect.
number
First quartile BoxPlot value.
boolean
Whether the glyph should be rendered horizontally instead of vertically.
number
Left pixel offset of the glyph.
Default 0
number
Maximum BoxPlot value.
SVGProps<SVGLineElement>
Props to pass to the maximum glyph line.
Default {}
number
Median BoxPlot value.
SVGProps<SVGLineElement>
Props to pass to the median glyph line.
Default {}
number
Minimum BoxPlot value.
SVGProps<SVGLineElement>
Props to pass to the minimum glyph line.
Default {}
SVGProps<SVGCircleElement>
Props to pass to the outlier glyph circles.
Default {}
number[]
Array of outlier values to be rendered.
Default []
number
Rx to apply to BoxPlot rect.
Default 2
number
Ry to apply to BoxPlot rect.
Default 2
string
Stroke color to apply to outlier circles, BoxPlot rect, and min/median/max lines.
ReactText
Stroke width to apply to outlier circles, BoxPlot rect, and min/median/max lines.
number
Third quartile BoxPlot value.
number
Top pixel offset of the glyph.
Default 0
#<ViolinPlot />
Data used to draw the violin plot glyph. Violin plot values and counts should be able to be derived from data.
ValueOf<Pick<ScaleTypeToD3Scale<number, StringLike, DefaultThresholdInput>, ContinuousDomainScaleType>>
required Scale for converting values to pixel offsets.
(providedProps: { path: string; }) => ReactNode
Override render function to fully control the rendering of the ViolinPlot glyph.
string
Classname to apply to parent group element.
(d: Datum) => number
Given an datum, returns the count for it.
boolean
Whether the glyph should be rendered horizontally instead of vertically.
number
Left pixel offset of the glyph.
Default 0
number
Top pixel offset of the glyph.
Default 0
(d: Datum) => number
Given an datum, returns the value for it.
number
Width of the violin plot glyph.
Default 10