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);
Click to copy
trace 0trace 100.511.52
trace 0trace 1
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
trace 005101520
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
246810Set 1Set 2
Set 1Set 2Horizontal 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);
Click to copy
day 1day 200.20.40.60.81
kaleradishescarrotsnormalized moisture
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
All PointsOnly WiskersSuspected OutlierWiskers and Outliers05101520
All PointsOnly WiskersSuspected OutlierWiskers and OutliersBox Plot Styling Outliers
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
Only MeanMean and Standard Deviation012345
Only MeanMean and Standard DeviationBox Plot Styling Mean and Standard Deviation
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
00.20.40.60.81day 1day 2
kaleradishescarrotsGrouped Horizontal Box Plotnormalized moisture
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
Sample ASample B246810
Sample ASample BColored 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);
Click to copy
CarmeloAnthonyDwyaneWadeDeronWilliamsBrookLopezDamianLillardDavidWestBlakeGriffinDavidLeeDemarDerozan051015202530354045
Points Scored by the Top 9 Scoring NBA Players in 2012
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