Box Plot Base - mwasiluk/ODC-d3 GitHub Wiki

Box Plot Base extends Chart.

Sample usage

Box Plot is created using an ODCD3.BoxPlotBase function:


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

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

#Configuration

The ODCD3.BoxPlotBase function takes 3 parameters:

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

Configuration object properties:

minBoxWidth - minimum box width, default: 35:
maxBoxWidth - maximum box width, default: 100:
x - X axis configuration object:
- title - axis title, default: ''
- guides - show axis guides, boolean (default: false)
- value - X value accessor function, may be used to override default accessor:
```
       d => d.key
```
y - Y axis configuration object:
- title - axis title, default: ''
- guides - show axis guides, boolean (default: true)
Q1 - Q1 value accessor function, default:
```
      d => d.values.Q1
```
Q2 - Q2 value accessor function, default:
```
      d => d.values.Q2
```
Q3 - Q3 value accessor function, default:
```
      d => d.values.Q3
```
Wl - low whisker value accessor function, default:
```
      d => d.values.whiskerLow
```
Wh - High whisker value accessor function, default:
```
      d => d.values.whiskerHigh
```
outliers - array of outliers accessor function, default:
```
      d => d.values.outliers
```
outlierValue - single outlier value accessor function, default:
```
      (d,i)=> d
```
outlierLabel - single outlier label accessor function, default:
```
      (d,i)=> d
```
color - css color string or function returning color's value for color scale
d3ColorCategory - d3 color scale name, default: category10

Data format

Example with data in default format (format may be customized with configuration object):

var data = [
                   {
                       key: "Sample 1",
                       values: {
                           Q1: 300,
                           Q2: 350,
                           Q3: 400,
                           whiskerLow: 225,
                           whiskerHigh: 425,
                           outliers: [175]
                       }
                   },
                   {
                       key: "Sample 2",
                       values: {
                           Q1: 50,
                           Q2: 100,
                           Q3: 125,
                           whiskerLow: 25,
                           whiskerHigh: 175,
                           outliers: [0, 250]
                       }
                   },
                   {
                       key: "Sample 3",
                       values: {
                           Q1: 160,
                           Q2: 210,
                           Q3: 260,
                           whiskerLow: 105,
                           whiskerHigh: 330,
                           outliers: [40, 90, 400]
                       }
                   }
           
           
               ]

Example