boxplot

forked from ColinEberhardt's block: d3fc box plot

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

#chart {
  width: 100%;
  height: 500px;
}

.point path {
  opacity: 0.2;
  width: 14
}

.y-axis-label {
  white-space: nowrap;
  transform: rotate(-90deg) translateY(0.1em) !important;
}

.y-axis-label, .x-axis-label {
  font-size: 1.5em;
}

</style>
<script src="https://unpkg.com/d3@4.6.0"></script>
<script src="https://unpkg.com/d3fc@12.1.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.18.0/d3-legend.min.js"></script>

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);
  var iqr = upper - lower;

var lowerLimit = lower - iqr * 1.5;
  var lowerWhisker = sorted.find(function(d) { return d > lowerLimit; });

var upperLimit = upper + iqr * 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);
  }, [])
}

d3.csv("data.csv", function(error, data) {

var cyl = Object.keys(data[0]);
  var series = cyl.map(function(elem) {
    return {
      seg: elem,
      data: box(data.map(function(d) { return Number(d[elem]); }))
    };
  })

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 point = fc.seriesSvgPoint()
      .crossValue(function(d) { return d[0]; })
      .mainValue(function(d) { return d[1]; });

var chart = fc.chartSvgCartesian(
        d3.scalePoint(),
        d3.scaleLinear()
      )
      .xDomain(cyl)
      .xPadding(0.5)
      .xLabel('Cycle de pose')
      .yLabel('Temps (en sec)')
//       .yDomain(yExtent(series.map(function(d) { return d.data; })))
      .yDomain([0, 500])
      .yTickFormat(yFormat)
      .plotArea(multi);

d3.select('#chart')
      .datum(series)
      .call(chart);
});

</script>

https://unpkg.com/d3@4.6.0

https://unpkg.com/d3fc@12.1.0

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.18.0/d3-legend.min.js