Table of Contents
Creating a box plot is a statistical method used to depict the distribution of a set of data. The process involves first arranging the data in ascending order and then finding the median, first and third quartiles. These values are then used to draw a box with the median line at the center and the first and third quartiles as the lower and upper boundaries. The whiskers of the box plot extend to the minimum and maximum values of the data, while any outliers are represented as individual points. This process provides a visual representation of the spread and central tendency of the data, making it a useful tool for data analysis and comparison.
Boxplot Generator
@import url(‘https://fonts.googleapis.com/css?family=Droid+Serif|Raleway’);
#chart {
width: 100%;
height: 500px;
}
.point path {
opacity: 0.5
}
.y-axis-label {
white-space: nowrap;
transform: rotate(-90deg) translateY(-3em) !important;
}
.y-axis-label, .x-axis-label {
font-size: 1.5em;
}
.x-axis .tick {
display: none;
}
.axis–y .domain {
display: none;
}
h1 {
text-align: center;
font-size: 50px;
margin-bottom: 0px;
font-family: ‘Raleway’, serif;
}
p {
color: black;
text-align: center;
margin-bottom: 15px;
margin-top: 15px;
font-family: ‘Raleway’, sans-serif;
}
#words {
padding-left: 30px;
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
}
#words_summary {
padding-left: 70px;
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
}
#words_text {
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
}
#words_text_area {
display:inline-block;
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
padding-left: 100px;
}
#calcTitle {
text-align: center;
font-size: 20px;
margin-bottom: 0px;
font-family: ‘Raleway’, serif;
}
#hr_top {
width: 30%;
margin-bottom: 0px;
border: none;
height: 2px;
color: black;
background-color: black;
}
#hr_bottom {
width: 30%;
margin-top: 15px;
border: none;
height: 2px;
color: black;
background-color: black;
}
#words label, input {
display: inline-block;
vertical-align: baseline;
width: 350px;
}
#button {
border: 1px solid;
border-radius: 10px;
margin-top: 20px;
cursor: pointer;
outline: none;
background-color: white;
color: black;
font-family: ‘Work Sans’, sans-serif;
border: 1px solid grey;
/* Green */
}
#button:hover {
background-color: #f6f6f6;
border: 1px solid black;
}
#words_table {
color: black;
font-family: Raleway;
max-width: 350px;
margin: 25px auto;
line-height: 1.75;
}
#summary_table {
color: black;
font-family: Raleway;
max-width: 550px;
margin: 25px auto;
line-height: 1.75;
padding-left: 20px;
}
.label_radio {
text-align: center;
}
td, tr, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
td, th {
min-width: 50px;
height: 21px;
}
.label_radio {
text-align: center;
}
#text_area_input {
padding-left: 35%;
float: left;
}
svg:not(:root) {
overflow: visible;
}
A boxplot (sometimes called a box-and-whisker plot) is a plot that shows the five-number summary of a dataset. The five-number summary is the minimum, first quartile, median, third quartile, and the maximum.
To create a boxplot for a given dataset, enter your comma separated data in the box below:
Minimum:
First quartile:
Median:
Third quartile:
Maximum:
//function to get weird object keys from object that holds boxplot
function resolve(path, obj=self, separator=’.’) {
var properties = Array.isArray(path) ? path : path.split(separator)
return properties.reduce((prev, curr) => prev && prev[curr], obj)
}
function calc() {
var input_data = document.getElementById(‘input_data’).value.match(/d+/g).map(Number);
var data = [];
for (var i=0; i {
var sorted = values.slice();
sorted.sort((a, b) => a – b);
var max = sorted[sorted.length – 1];
var min = sorted[0];
//var upper = d3.quantile(sorted, 0.75);
//var mid = d3.quantile(sorted, 0.5);
//var lower = d3.quantile(sorted, 0.25);
// find the median of the sample
var mid = math.median(sorted);
// split the data by the median
var _firstHalf = sorted.filter(function(f){ return f mid})
// find the medians for each split, calculate IQR
var lower = math.median(_firstHalf);
var upper = math.median(_secondHalf);
var lowerLimit = lower – ((upper – lower) * 1.5);
var lowerWhisker = sorted.find(function(d) { return d > lowerLimit; });
var upperLimit = upper – (-1 * ((upper – lower) * 1.5));
var upperWhisker = sorted.reverse().find(function(d) { return d upperWhisker || d {
switch(series[index]) {
case point:
return flatten(data.map(function(s) {
return s.data.outliers.map(function(o) { return [s.quarter, o]; })
}))
case boxplot:
return data;
}
});
var chart = fc.chartSvgCartesian(
d3.scalePoint(),
d3.scaleLinear()
)
.xDomain(quarters)
.xPadding(0.1)
.yDomain(yExtent(series.map(function(d) { return d.data; })))
.yTickFormat(yFormat)
.plotArea(multi);
d3.select(‘#chart’)
.datum(series)
.call(chart);
//output results
var min = resolve(‘0->data->min’, series, ‘->’);
var quartile1 = resolve(‘0->data->lower’, series, ‘->’);
var mid = resolve(‘0->data->mid’, series, ‘->’);
var quartile3 = resolve(‘0->data->upper’, series, ‘->’);
var max = resolve(‘0->data->max’, series, ‘->’);
var outliers = resolve(‘0->data->outliers’, series, ‘->’);
document.getElementById(‘min’).innerHTML = min;
document.getElementById(‘quartile1’).innerHTML = quartile1;
document.getElementById(‘mid’).innerHTML = mid;
document.getElementById(‘quartile3’).innerHTML = quartile3;
document.getElementById(‘max’).innerHTML = max;
} //end calc function