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. Try Plotly Studio now.

Basic Box Plot

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);

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: {
    text: '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,
  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);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var x = ['day 1', 'day 1', 'day 1', 'day 1', 'day 1', 'day 1',\n 'day 2', 'day 2', 'day 2', 'day 2', 'day 2', 'day 2']\n\nvar trace1 = {\n 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],\n x: x,\n name: 'kale',\n marker: {color: '#3D9970'},\n type: 'box'\n};\n\nvar trace2 = {\n 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],\n x: x,\n name: 'radishes',\n marker: {color: '#FF4136'},\n type: 'box'\n};\n\nvar trace3 = {\n 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],\n x: x,\n name: 'carrots',\n marker: {color: '#FF851B'},\n type: 'box'\n};\n\nvar data = [trace1, trace2, trace3];\n\nvar layout = {\n yaxis: {\n title: {\n text: 'normalized moisture'\n },\n zeroline: false\n },\n boxmode: 'group'\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

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: {
    text: 'Box Plot Styling Outliers'
  }
};

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

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var trace1 = {\n 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],\n type: 'box',\n name: 'All Points',\n jitter: 0.3,\n pointpos: -1.8,\n marker: {\n color: 'rgb(7,40,89)'\n },\n boxpoints: 'all'\n};\n\nvar trace2 = {\n 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],\n type: 'box',\n name: 'Only Wiskers',\n marker: {\n color: 'rgb(9,56,125)'\n },\n boxpoints: false\n};\n\nvar trace3 = {\n 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],\n type: 'box',\n name: 'Suspected Outlier',\n marker: {\n color: 'rgb(8,81,156)',\n outliercolor: 'rgba(219, 64, 82, 0.6)',\n line: {\n outliercolor: 'rgba(219, 64, 82, 1.0)',\n outlierwidth: 2\n }\n },\n boxpoints: 'suspectedoutliers'\n};\n\nvar trace4 = {\n 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],\n type: 'box',\n name: 'Wiskers and Outliers',\n marker: {\n color: 'rgb(107,174,214)'\n },\n boxpoints: 'Outliers'\n};\n\n\n\nvar data = [trace1, trace2, trace3, trace4];\n\nvar layout = {\n title: {\n text: 'Box Plot Styling Outliers'\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

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: {
    text: 'Box Plot Styling Mean and Standard Deviation'
  }
};

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

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var trace1 = {\n 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],\n type: 'box',\n name: 'Only Mean',\n marker: {\n color: 'rgb(8,81,156)'\n },\n boxmean: true\n};\n\nvar trace2 = {\n 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],\n type: 'box',\n name: 'Mean and Standard Deviation',\n marker: {\n color: 'rgb(10,140,208)'\n },\n boxmean: 'sd'\n};\n\n\nvar data = [trace1, trace2];\n\nvar layout = {\n title: {\n text: 'Box Plot Styling Mean and Standard Deviation'\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

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,
  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);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var y = ['day 1', 'day 1', 'day 1', 'day 1', 'day 1', 'day 1',\n 'day 2', 'day 2', 'day 2', 'day 2', 'day 2', 'day 2']\n\nvar trace1 = {\n 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],\n y: y,\n name: 'kale',\n marker: {color: '#3D9970'},\n type: 'box',\n boxmean: false,\n orientation: 'h'\n};\n\nvar trace2 = {\n 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],\n y: y,\n name: 'radishes',\n marker: {color: '#FF4136'},\n type: 'box',\n boxmean: false,\n orientation: 'h'\n};\n\nvar trace3 = {\n 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],\n y: y,\n name: 'carrots',\n marker: {color: '#FF851B'},\n type: 'box',\n boxmean: false,\n orientation: 'h'\n};\n\nvar data = [trace1, trace2, trace3];\n\nvar layout = {\n title: {\n text: 'Grouped Horizontal Box Plot'\n },\n xaxis: {\n title: {\n text: 'normalized moisture'\n },\n zeroline: false\n },\n boxmode: 'group'\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

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: {
    text: '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++ ) {
        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);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var xData = ['Carmelo<br>Anthony', 'Dwyane<br>Wade',\n 'Deron<br>Williams', 'Brook<br>Lopez',\n 'Damian<br>Lillard', 'David<br>West',\n 'Blake<br>Griffin', 'David<br>Lee',\n 'Demar<br>Derozan'];\n\nfunction getrandom(num , mul) {\n var value = [ ];\n for ( i = 0; i <= num; i++ ) {\n var rand = Math.random() * mul;\n value.push(rand);\n }\n return value;\n}\n\nvar yData = [\n getrandom(30 ,10),\n getrandom(30, 20),\n getrandom(30, 25),\n getrandom(30, 40),\n getrandom(30, 45),\n getrandom(30, 30),\n getrandom(30, 20),\n getrandom(30, 15),\n getrandom(30, 43),\n ];\nvar 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)'];\n\nvar data = [];\n\nfor ( var i = 0; i < xData.length; i ++ ) {\n var result = {\n type: 'box',\n y: yData[i],\n name: xData[i],\n boxpoints: 'all',\n jitter: 0.5,\n whiskerwidth: 0.2,\n fillcolor: 'cls',\n marker: {\n size: 2\n },\n line: {\n width: 1\n }\n };\n data.push(result);\n};\n\nlayout = {\n title: {\n text: 'Points Scored by the Top 9 Scoring NBA Players in 2012'\n },\n yaxis: {\n autorange: true,\n showgrid: true,\n zeroline: true,\n dtick: 5,\n gridcolor: 'rgb(255, 255, 255)',\n gridwidth: 1,\n zerolinecolor: 'rgb(255, 255, 255)',\n zerolinewidth: 2\n },\n margin: {\n l: 40,\n r: 30,\n b: 80,\n t: 100\n },\n paper_bgcolor: 'rgb(243, 243, 243)',\n plot_bgcolor: 'rgb(243, 243, 243)',\n showlegend: false\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

Rainbow Box Plot

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);

</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"function linspace(a,b,n) {\n return d3.range(n).map(function(i){return a+i*(b-a)/(n-1);});\n}\nvar boxNumber = 30;\nvar boxColor = [];\nvar allColors = linspace(0, 360, boxNumber);\nvar data = [];\nvar yValues = [];\n\n//Colors\n\nfor( var i = 0; i < boxNumber; i++ ){\n var result = 'hsl('+ allColors[i] +',50%'+',50%)';\n boxColor.push(result);\n}\n\nfunction getRandomArbitrary(min, max) {\n return Math.random() * (max - min) + min;\n};\n\n//Create Y Values\n\nfor( var i = 0; i < boxNumber; i++ ){\n var ySingleArray = [];\n for( var j = 0; j < 10; j++ ){\n var randomNum = getRandomArbitrary(0, 1);\n var yIndValue = 3.5*Math.sin(Math.PI * i/boxNumber) + i/boxNumber+(1.5+0.5*Math.cos(Math.PI*i/boxNumber))*randomNum;\n ySingleArray.push(yIndValue);\n }\n yValues.push(ySingleArray);\n}\n\n//Create Traces\n\nfor( var i = 0; i < boxNumber; i++ ){\n var result = {\n y: yValues[i],\n type:'box',\n marker:{\n color: boxColor[i]\n }\n };\n data.push(result);\n};\n\n//Format the layout\n\nvar layout = {\n xaxis: {\n showgrid: false,\n zeroline: false,\n tickangle: 60,\n showticklabels: false\n },\n yaxis: {\n zeroline: false,\n gridcolor: 'white'\n },\n paper_bgcolor: 'rgb(233,233,233)',\n plot_bgcolor: 'rgb(233,233,233)',\n showlegend:false\n};\n\n\nPlotly.newPlot('myDiv', data, layout);\n"}">