Générateur de boîtes à moustaches
Un boxplot (parfois appelé diagramme en boîte et moustaches) est un tracé qui montre le résumé en cinq chiffres d’un ensemble de données. Le résumé en cinq chiffres est le minimum, le premier quartile, la médiane, le troisième quartile et le maximum.
Pour créer un boxplot pour un ensemble de données donné, entrez vos données séparées par des virgules dans la case ci-dessous :
Le minimum:
Premier quartile :
Médian:
Troisième 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 < 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