Boxplotgenerator
Een boxplot (ook wel een box-and-whisker-plot genoemd) is een plot die de vijfcijferige samenvatting van een reeks gegevens weergeeft. De samenvatting met vijf cijfers is het minimum, het eerste kwartiel, de mediaan, het derde kwartiel en het maximum.
Om een boxplot voor een bepaalde dataset te maken, voert u uw gegevens in het onderstaande vak in, gescheiden door komma’s:
Minimum:
Eerste kwartiel:
Mediaan:
Derde kwartiel:
Maximaal:
//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 < input_data.length; i++) { data.push({ Q1: input_data[i] }); } var box = (values) => { 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}) var _secondHalf = 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 < upperLimit; }); return { upper: upper, mid: mid, lower: lower, lowerWhisker: lowerWhisker, upperWhisker: upperWhisker, max: max, min:min, outliers: values.filter(function(d) { return d > upperWhisker || d < lowerWhisker; }) } } var flatten = function(arrays) { return arrays.reduce(function(a, b) { return a.concat(b); }, []) } var quarters = Object.keys(data[0]); var series = quarters.map(function(q) { return { quarter: q, data: box(data.map(function(d) { return Number(d[q]); })) }; }) var yFormat = d3.format(',.0f'); var yExtent = fc.extentLinear() .accessors([function(d) { return d.max; }, function(d) { return d.min; }]) .pad([0, 0.1]) .include([0]) var boxplot = fc.seriesSvgBoxPlot() .crossValue(function(d) { return d.quarter; }) .medianValue(function(d) { return d.data.mid; }) .barWidth(50) .upperQuartileValue(function(d) { return d.data.upper; }) .lowerQuartileValue(function(d) { return d.data.lower; }) .highValue(function(d) { return d.data.upperWhisker; }) .lowValue(function(d) { return d.data.lowerWhisker; }); var point = fc.seriesSvgPoint() .crossValue(function(d) { return d[0]; }) .mainValue(function(d) { return d[1]; }); var label = fc.seriesSvgPoint() .crossValue(function(d) { return d[0]; }) .mainValue(function(d) { return d[1]; }) .decorate(function(selection) { selection.enter() .select('path') .attr('display', 'none') selection.enter() .append('text') .style('text-anchor', 'middle') .attr('transform', function(d, i) { return 'translate(' + (i % 2 === 0 ? -50 : 50) + ', 5)'; }) .text(function(d) { return yFormat(d[1]); }) .attr('stroke', 'transparent') .attr('fill', 'black'); }); var multi = fc.seriesSvgMulti() .series([boxplot, point, label]) .mapping((data, index, series) => { 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