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.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
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);
Click to copy
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);
Click to copy
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);
Click to copy
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);
Click to copy
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);
Click to copy
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);
Click to copy
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);
Click to copy
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);
Click to copy
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);
Click to copy
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);
Click to copy
