مولد مؤامرة مربع
مخطط الصندوق (يُطلق عليه أحيانًا مخطط الصندوق والطرف) عبارة عن مخطط يوضح ملخصًا مكونًا من خمسة أرقام لمجموعة من البيانات. ملخص الأرقام الخمسة هو الحد الأدنى، الربع الأول، الوسيط، الربع الثالث والحد الأقصى.
لإنشاء مخطط boxplot لمجموعة بيانات معينة، أدخل بياناتك مفصولة بفواصل في المربع أدناه:
الحد الأدنى:
الربع الأول:
الوسيط:
الربع الثالث:
أقصى:
//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