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