ViolinPlot

live example

Explore the API in the live example.

api reference

ViolinPlot(name[, parent])

The violin plot widget. As a chart, it extends the [Chart] ../components/chart.html component, with all of its available APIs. Furthermore, it extends the following components:

BottomAxis
ElementTooltip The default entries shown in the tooltip are: mean, median, bimodality coefficient.
Highlight Violins can be highlighted by passing their names as specified in the data array.
Horizontal
LeftAxis
LineWidth
Objects
Opacity
YRange

Parameters

Name	Type	Description
name	string	Name of the chart. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

ViolinPlot.bandwidth([bandwidth])

Sets the bandwidth of the violin's kernel density estimate to the specified value.

Parameters

Name	Type	Description
bandwidth	number	optionalBandwidth size. Default value is `1`.

Returns

Object

Reference to the ViolinPlot's API.

Examples

// Set bandwidth of KDE to 10.
const violin = dalian.ViolinPlot('my-chart')
  .bandwidth(10)
  .render()

// Reset bandwidth to default.
violin.bandwidth()
  .render()

ViolinPlot.data(plots)

Set/updates the chart data. Each violin is a plot group in itself, so all methods that operate on plot groups are applied on the violin level.

Parameters

Name	Type	Description
plots	Object[]	Array of objects representing the violins to show. Each violin has two properties: name `string` Category name. values `number[]` Sample values corresponding to the category. These should be the raw observations, the KDE is computed by the chart itself. Note that for the violin plot, the raw observations should be passed as values as the chart itself calculates the KDE used to represent the data.

Returns

ViolinPlot

Reference to the ViolinPlot API.

Examples

const violin = dalian.ViolinPlot('my-chart')
  .data([{
    name: 'violin 1',
    values: [1, 1, 3, 3, 2, 4, 7, 4, 3, 9]
  }, {
    name: 'violin 2',
    values: [4, 5, 5, 4, 7, 4, 2, 2, 6, 2]
  }])
  .render()

ViolinPlot.violinWidth([width])

Sets the violin width in pixels.

Parameters

Name	Type	Description
width	number	optionalWidth of the violins in pixels. Default value is `30`.

Returns

Object

Reference to the ViolinPlot's API.

Examples

// Set violin width to 20px.
const violin = dalian.ViolinPlot('my-chart')
  .violinWidth(20)
  .render()

// Reset violin width to default value.
violin.violinWidth()
  .render()