Suggest an edit to this page

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.

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

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