d3-boxplot
v1.0.0
Published
d3js plugin for box-and-whisker plot
Downloads
1,238
Maintainers
Readme
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:
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:
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
.