@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; }

Блочная диаграмма (иногда называемая диаграммой «коробка с усами») — это диаграмма, которая показывает пятизначную сводку набора данных. Сводка из пяти чисел — это минимум, первая квартиль, медиана, третья квартиль и максимум.

Чтобы создать ящичковую диаграмму для данного набора данных, введите данные, разделенные запятыми, в поле ниже:

Минимум:

Первый квартиль:

Медиана:

Третий квартиль:

Максимум:

//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