Box Plots in JavaScript
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.
New to Plotly?
Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.
var y0 = [];
var y1 = [];
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);
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);
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: {
text: 'Horizontal Box Plot'
},
};
Plotly.newPlot('myDiv', data, layout);
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,
name: 'radishes',
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: {
text: 'normalized moisture'
},
zeroline: false
},
boxmode: 'group'
};
Plotly.newPlot('myDiv', data, layout);
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: {
text: 'Box Plot Styling Outliers'
}
};
Plotly.newPlot('myDiv', data, layout);
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: {
text: 'Box Plot Styling Mean and Standard Deviation'
}
};
Plotly.newPlot('myDiv', data, layout);
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,
name: 'radishes',
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: {
text: 'Grouped Horizontal Box Plot'
},
xaxis: {
title: {
text: 'normalized moisture'
},
zeroline: false
},
boxmode: 'group'
};
Plotly.newPlot('myDiv', data, layout);
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: {
text: 'Colored Box Plot'
}
};
Plotly.newPlot('myDiv', data, layout);
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++ ) {
var 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: {
text: '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);
function linspace(a,b,n) {
return d3.range(n).map(function(i){return a+i*(b-a)/(n-1);});
}
var boxNumber = 30;
var boxColor = [];
var allColors = 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);
