@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