d3-boxplot

d3js plugin for box-and-whisker plot.

!d3-boxplot

Installing

If you use NPM, npm install d3-boxplot. Otherwise, download the
latest release.

Usage

Here's a minimal code snippet:

``javascript
let data = [1, 2, 3, 4, 5]
let stats = d3.boxplotStats(data)
let x = d3.scaleLinear()
.domain(d3.extent(data))
.range([0, 300])
let plot = d3.boxplot().scale(x)
d3.select('svg').datum(stats).call(plot)
`

Visit this page to see more examples.

API Reference

# d3.boxplot()

Constructs a new box plot generator with the default settings.

# d3.boxplotStats(data, [accessor])

Calculates descriptive statistics such as five-number summeries, IQR, and inner/outer fences of
given sorted array data. If the type of elements in data is not a number, you should
provide an accessor function as the second argument and the array should be sorted according to
the accessor.

If you have multiple batches of data, you may use Array.map() to turn them into box plot
statistics:

`javascript
let batches = [
[1,2,3,4,5],
[6,7,8,9,10]
]
let stats = batches.map(function(b) {return d3.boxplotStats(b)})
`

Now you can draw small-multiples of box plots using conventional d3 code:

`javascript
d3.select('svg').selectAll('g.plot').data(stats)
.join('g')
.attr('transform', function(d, i) {return 'translate(...)'})
.call(d3.boxplot())
`

Box plot statistics are also useful to render additional annotations on top of a box plot, like
this:

!Annotated box plot

Visit Box plot explained to see the code.

# boxplot.vertical([vertical])

Sets or returns vertical mode. The default value is false which means a horizontal mode.

# boxplot.scale([scale])

Sets or returns scale. The default value is d3.scaleLinear() instance with domain [0, 1], and
range [0, 1].

# boxplot.bandwidth([bandwidth])

Sets or returns bandwidth. Bandwidth is a pixel value specifying a thickness of the plot. The
default value is 20.

# boxplot.boxwidth([boxwidth])

Sets or returns boxwidth. Boxwidth is a pixel value specifying a thickness of the IQR box. The
default value is 20. By setting this value to 3 and hide inner dots by call
showInnerDots(false), you can render minimalistic box plots mimic Edward Tufte's style:

!Minimalistic box plot

# boxplot.showInnerDots([flag])

Sets or returns showInnerDots flag. Set it true to show all data dots, or false to show
only outliers (and far-outs). The default value is true.

# boxplot.symbol([symbol])

Sets or returns symbol. The default value is boxplotSymbolDot. The following list shows possible
options:

* boxplotSymbolDot
* boxplotSymbolTick

boxplotSymbolTick renders thin lines instead of small circles:

!Ticks

# boxplot.opacity([opacity])

Sets of returns opacity. The default value is 0.8. Partial transparency helps you to reveal
dots under the box.

# boxplot.jitter([jitter])

Sets or returns jittering value. Actual value used is bandwidth jitter*. Set the value 0.0
to disable jittering. The default value is 0.5. Please note that the jittering only works with
symbol(boxplotSymbolTick).

# boxplot.key([key])

Sets or returns key function for object constancy. The
default value is undefined`.