https://github.com/akngs/d3-boxplot

d3js box plot plugin
https://github.com/akngs/d3-boxplot

boxplot d3js javascript statistics svg visualization

Last synced: 12 days ago
JSON representation

d3js box plot plugin

• Host: GitHub
• URL: https://github.com/akngs/d3-boxplot
• Owner: akngs
• License: isc
• Created: 2019-02-20T00:48:53.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2023-03-10T23:56:54.000Z (almost 2 years ago)
• Last Synced: 2024-10-30T14:43:30.353Z (2 months ago)
• Topics: boxplot, d3js, javascript, statistics, svg, visualization
• Language: JavaScript
• Size: 583 KB
• Stars: 22
• Watchers: 4
• Forks: 2
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-d3 - d3-boxplot - d3js box plot plugin (Charts)
• awesome-d3 - d3-boxplot - d3js box plot plugin (Charts)

README

        
# d3-boxplot

d3js plugin for box-and-whisker plot.

![d3-boxplot](img/d3-boxplot.png)

## Installing

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

[latest release](https://github.com/akngs/d3-boxplot/releases/latest).

## 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](https://beta.observablehq.com/@akngs/d3-boxplot) 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](img/d3-boxplot-annotated.png)

Visit [Box plot explained](https://beta.observablehq.com/@akngs/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](img/d3-boxplot-minimalStyle.png)

# 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](img/d3-boxplot-ticks.png)

# 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 *jitter*ing 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](https://bost.ocks.org/mike/constancy/). The

default value is `undefined`.

## Development

To bump version run the followings after commit all changes:

    npm version vx.y.z

    npm publish