d3-boxplot

d3js plugin for box-and-whisker plot.

Installing

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

Usage

Here's a minimal code snippet:

<script src="d3.v5.js"></script>
<script src="d3-boxplot.js"></script>

<script>
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)
</script>

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:

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:

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:

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:

# 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:

# 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.