A box plot is a convenient way of graphically depicting groups of numerical data through their quartiles. Box plots have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles. Outliers are plotted as individual points

Box Plot extends [Box Plot Base](Box Plot Base) with automatic computation of box plot parameters (Q1, Q2, Q3, whiskers and outliers) for given data.

Supported types of boxplots:

• default - with whiskers at the minimum and maximum of all of the data,
• tukey - with whiskers at Q1 - 1.5*IQR and Q3 + 1.5*IQR plus outliers.

#Demo Online demo

Sample usage

Box Plot is created using an ODCD3.BoxPlot function:

var placeholderSelector = "#plot";
var data = [ ... ]; // array of arrays/objects 
var config = { //optional config object
    ...
};

var plot = new ODCD3.BoxPlot(placeholderSelector, data, config);  

#Configuration

The ODCD3.BoxPlot function takes 3 parameters:

1. selector for plot placeholder element - d3.select compatible (string or node)
2. data to plot (array of numbers; array of arrays / objects)
3. optional config object

Configuration object properties (not inherited from [Box Plot Base](Box Plot Base)):

• y - Y axis configuration object:
  • key - object property name or array index with Y axis value, default: undefined
  • value - Y value accessor function with this set to the config object, may be used to override default:

    
          function(d) { return this.y.key===undefined ? d : d[this.y.key]}
    

• groups - groups configuration object:
  • key - object property name or array index with grouping variable, default: 2
  • value - grouping value accessor with this set to the config object, may be used to override default accessor:

    
          function(d) { return this.groups.key===undefined ? '' : d[this.groups.key]}
    

  • displayValue - optional function returning display value (series label) for given group value, or object/array mapping value to display value
• series - use series data, boolean (default: false)
• tukey - draw tukey boxplot, boolean (default: false)

Data format

Array of numbers, arrays or objects, e.g.:

var data = [
    [1, 2, 'dog'],
    [2, 3, 'cat'],
    [3, 4, 'dog']
];

or

var data = [
    {a: 1, b: 2, species: 'dog'},
    {a: 2, b: 3, species: 'cat'},
    {a: 3, b: 4, species: 'dog'},
];

or series of numbers/objects/arrays (requires series option set to true), e.g.:

var data = [
    {
        key: "dog", //sersie key
        values: [{a: 1, b: 2}, {a: 3, b: 4}] //serie values
    },
    {
        key: "cat",
        values: [{a: 2, b: 3}]
    }
];