Boxplot

This is the boxplot section of the gallery. If you want to know more about this kind of chart, visit data-to-viz.com. If you're looking for a simple way to implement it in d3.js, pick an example below.

Step by step

Most basic

The most basic boxplot you can do in d3.js. Keeping only the core code. Starts with an array of data.

With several group

A boxplot with several groups. It extends the technique used on the previous chart. The tricky part is to computed summary statistics for each group.

Show individual data points

The major downside of boxplot is that it hides the underlying data points. It is a good practice to show them using jitter. Learn how with this example.

Template

Here is the template I'm starting with when in need for a boxplot in my work. See the code here.

Related blocks

Related chart types

Violin

Density

Histogram

Boxplot

Ridgeline