## plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar

# Box Plots in plotly.js

How to make a D3.js-based box plot in javascript. Seven examples of box plots in javascript that are grouped, colored, and display the underlying data distribution.

#### Basic Box Plot

for (var i = 0; i < 50; i ++) {
y0[i] = Math.random();
y1[i] = Math.random() + 1;
}

var trace1 = {
y: y0,
type: 'box'
};

var trace2 = {
y: y1,
type: 'box'
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);


#### Box Plot That Displays the Underlying Data

var data = [
{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: -1.8,
type: 'box'
}
];

Plotly.newPlot('myDiv', data);


#### Horizontal Box Plot

var trace1 = {
x: [1, 2, 3, 4, 4, 4, 8, 9, 10],
type: 'box',
name: 'Set 1'
};

var trace2 = {
x: [2, 3, 3, 3, 3, 5, 6, 6, 7],
type: 'box',
name: 'Set 2'
};

var data = [trace1, trace2];

var layout = {
title: 'Horizontal Box Plot'
};

Plotly.newPlot('myDiv', data, layout);


#### Grouped Box Plot

var x = ['day 1', 'day 1', 'day 1', 'day 1', 'day 1', 'day 1',
'day 2', 'day 2', 'day 2', 'day 2', 'day 2', 'day 2']

var trace1 = {
y: [0.2, 0.2, 0.6, 1.0, 0.5, 0.4, 0.2, 0.7, 0.9, 0.1, 0.5, 0.3],
x: x,
name: 'kale',
marker: {color: '#3D9970'},
type: 'box'
};

var trace2 = {
y: [0.6, 0.7, 0.3, 0.6, 0.0, 0.5, 0.7, 0.9, 0.5, 0.8, 0.7, 0.2],
x: x,
marker: {color: '#FF4136'},
type: 'box'
};

var trace3 = {
y: [0.1, 0.3, 0.1, 0.9, 0.6, 0.6, 0.9, 1.0, 0.3, 0.6, 0.8, 0.5],
x: x,
name: 'carrots',
marker: {color: '#FF851B'},
type: 'box'
};

var data = [trace1, trace2, trace3];

var layout = {
yaxis: {
title: 'normalized moisture',
zeroline: false
},
boxmode: 'group'
};

Plotly.newPlot('myDiv', data, layout);


#### Box Plot Styling Outliers

var trace1 = {
y: [0.75, 5.25, 5.5, 6, 6.2, 6.6, 6.80, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10, 10.25, 11.5, 12, 16, 20.90, 22.3, 23.25],
type: 'box',
name: 'All Points',
jitter: 0.3,
pointpos: -1.8,
marker: {
color: 'rgb(7,40,89)'
},
boxpoints: 'all'
};

var trace2 = {
y: [0.75, 5.25, 5.5, 6, 6.2, 6.6, 6.80, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10, 10.25, 11.5, 12, 16, 20.90, 22.3, 23.25],
type: 'box',
name: 'Only Wiskers',
marker: {
color: 'rgb(9,56,125)'
},
boxpoints: false
};

var trace3 = {
y: [0.75, 5.25, 5.5, 6, 6.2, 6.6, 6.80, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10, 10.25, 11.5, 12, 16, 20.90, 22.3, 23.25],
type: 'box',
name: 'Suspected Outlier',
marker: {
color: 'rgb(8,81,156)',
outliercolor: 'rgba(219, 64, 82, 0.6)',
line: {
outliercolor: 'rgba(219, 64, 82, 1.0)',
outlierwidth: 2
}
},
boxpoints: 'suspectedoutliers'
};

var trace4 = {
y: [0.75, 5.25, 5.5, 6, 6.2, 6.6, 6.80, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10, 10.25, 11.5, 12, 16, 20.90, 22.3, 23.25],
type: 'box',
name: 'Wiskers and Outliers',
marker: {
color: 'rgb(107,174,214)'
},
boxpoints: 'Outliers'
};

var data = [trace1, trace2, trace3, trace4];

var layout = {
title: 'Box Plot Styling Outliers'
};

Plotly.newPlot('myDiv', data, layout);


#### Box Plot Styling Mean and Standard Deviation

var trace1 = {
y: [2.37, 2.16, 4.82, 1.73, 1.04, 0.23, 1.32, 2.91, 0.11, 4.51, 0.51, 3.75, 1.35, 2.98, 4.50, 0.18, 4.66, 1.30, 2.06, 1.19],
type: 'box',
name: 'Only Mean',
marker: {
color: 'rgb(8,81,156)'
},
boxmean: true
};

var trace2 = {
y: [2.37, 2.16, 4.82, 1.73, 1.04, 0.23, 1.32, 2.91, 0.11, 4.51, 0.51, 3.75, 1.35, 2.98, 4.50, 0.18, 4.66, 1.30, 2.06, 1.19],
type: 'box',
name: 'Mean and Standard Deviation',
marker: {
color: 'rgb(10,140,208)'
},
boxmean: 'sd'
};

var data = [trace1, trace2];

var layout = {
title: 'Box Plot Styling Mean and Standard Deviation'
};

Plotly.newPlot('myDiv', data, layout);


#### Grouped Horizontal Box Plot

var y = ['day 1', 'day 1', 'day 1', 'day 1', 'day 1', 'day 1',
'day 2', 'day 2', 'day 2', 'day 2', 'day 2', 'day 2']

var trace1 = {
x: [0.2, 0.2, 0.6, 1.0, 0.5, 0.4, 0.2, 0.7, 0.9, 0.1, 0.5, 0.3],
y: y,
name: 'kale',
marker: {color: '#3D9970'},
type: 'box',
boxmean: false,
orientation: 'h'
};

var trace2 = {
x: [0.6, 0.7, 0.3, 0.6, 0.0, 0.5, 0.7, 0.9, 0.5, 0.8, 0.7, 0.2],
y: y,
marker: {color: '#FF4136'},
type: 'box',
boxmean: false,
orientation: 'h'
};

var trace3 = {
x: [0.1, 0.3, 0.1, 0.9, 0.6, 0.6, 0.9, 1.0, 0.3, 0.6, 0.8, 0.5],
y: y,
name: 'carrots',
marker: {color: '#FF851B'},
type: 'box',
boxmean: false,
orientation: 'h'
};

var data = [trace1, trace2, trace3];

var layout = {
title: 'Grouped Horizontal Box Plot',
xaxis: {
title: 'normalized moisture',
zeroline: false
},
boxmode: 'group'
};

Plotly.newPlot('myDiv', data, layout);


#### Colored Box Plot

var trace1 = {
y: [1, 2, 3, 4, 4, 4, 8, 9, 10],
type: 'box',
name: 'Sample A',
marker:{
color: 'rgb(214,12,140)'
}
};

var trace2 = {
y: [2, 3, 3, 3, 3, 5, 6, 6, 7],
type: 'box',
name: 'Sample B',
marker:{
color: 'rgb(0,128,128)'
}
};

var data = [trace1, trace2];

var layout = {
title: 'Colored Box Plot'
};

Plotly.newPlot('myDiv', data, layout);


#### Fully Styled Box Plot

var xData = ['Carmelo<br>Anthony', 'Dwyane<br>Wade',
'Deron<br>Williams', 'Brook<br>Lopez',
'Damian<br>Lillard', 'David<br>West',
'Blake<br>Griffin', 'David<br>Lee',
'Demar<br>Derozan'];

function getrandom(num , mul)
{
var value = [ ]
for(i=0;i<=num;i++)
{
rand = Math.random() * mul;
value.push(rand);
}
return value;
}

var yData = [
getrandom(30 ,10),
getrandom(30, 20),
getrandom(30, 25),
getrandom(30, 40),
getrandom(30, 45),
getrandom(30, 30),
getrandom(30, 20),
getrandom(30, 15),
getrandom(30, 43),
];
var colors = ['rgba(93, 164, 214, 0.5)', 'rgba(255, 144, 14, 0.5)', 'rgba(44, 160, 101, 0.5)', 'rgba(255, 65, 54, 0.5)', 'rgba(207, 114, 255, 0.5)', 'rgba(127, 96, 0, 0.5)', 'rgba(255, 140, 184, 0.5)', 'rgba(79, 90, 117, 0.5)', 'rgba(222, 223, 0, 0.5)'];

var data = [];

for ( var i = 0; i < xData.length; i ++ ) {
var result = {
type: 'box',
y: yData[i],
name: xData[i],
boxpoints: 'all',
jitter: 0.5,
whiskerwidth: 0.2,
fillcolor: 'cls',
marker: {
size: 2
},
line: {
width: 1
}
};
data.push(result);
};

layout = {
title: 'Points Scored by the Top 9 Scoring NBA Players in 2012',
yaxis: {
autorange: true,
showgrid: true,
zeroline: true,
dtick: 5,
gridcolor: 'rgb(255, 255, 255)',
gridwidth: 1,
zerolinecolor: 'rgb(255, 255, 255)',
zerolinewidth: 2
},
margin: {
l: 40,
r: 30,
b: 80,
t: 100
},
paper_bgcolor: 'rgb(243, 243, 243)',
plot_bgcolor: 'rgb(243, 243, 243)',
showlegend: false
};

Plotly.newPlot('myDiv', data, layout);


#### Rainbow Box Plot

var boxNumber = 30;
var boxColor = [];
var allColors = numeric.linspace(0, 360, boxNumber);
var data = [];
var yValues = [];

//Colors

for( var i = 0; i < boxNumber;  i++ ){
var result = 'hsl('+ allColors[i] +',50%'+',50%)';
boxColor.push(result);
}

function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
};

//Create Y Values

for( var i = 0; i < boxNumber;  i++ ){
var ySingleArray = [];
for( var j = 0; j < 10;  j++ ){
var randomNum = getRandomArbitrary(0, 1);
var yIndValue = 3.5*Math.sin(Math.PI * i/boxNumber) + i/boxNumber+(1.5+0.5*Math.cos(Math.PI*i/boxNumber))*randomNum;
ySingleArray.push(yIndValue);
}
yValues.push(ySingleArray);
}

//Create Traces

for( var i = 0; i < boxNumber;  i++ ){
var result = {
y: yValues[i],
type:'box',
marker:{
color: boxColor[i]
}
};
data.push(result);
};

//Format the layout

var layout = {
xaxis: {
showgrid: false,
zeroline: false,
tickangle: 60,
showticklabels: false
},
yaxis: {
zeroline: false,
gridcolor: 'white'
},
paper_bgcolor: 'rgb(233,233,233)',
plot_bgcolor: 'rgb(233,233,233)',
showlegend:false
};

Plotly.newPlot('myDiv', data, layout);

Still need help?