Pembuat plot kotak
Plot kotak (terkadang disebut plot kotak dan kumis) adalah plot yang menampilkan ringkasan lima angka dari sekumpulan data. Rangkuman lima angka tersebut adalah minimum, kuartil pertama, median, kuartil ketiga, dan maksimum.
Untuk membuat plot kotak untuk kumpulan data tertentu, masukkan data Anda dipisahkan dengan koma pada kotak di bawah ini:
Minimum:
Kuartil pertama:
Median:
Kuartil ketiga:
Maksimum:
//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