d3.compose Error Bars

Error Bars component for d3.compose.

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/d3.compose@0.15.13/dist/d3.compose.css">
<style>
  #chart {width: 800px; height: 400px;}
  .error-bars-tick {stroke-width: 2px;}
  .error-bars-beam {stroke-dasharray: 10, 10;}
</style>

Looks for error: [min, max] for each data-point
*/
var Mixed = d3c.helpers.mixin(d3c.Chart, d3c.mixins.Series, d3c.mixins.XY);
Mixed.extend('ErrorBars', {
  initialize: function() {
    Mixed.prototype.initialize.apply(this, arguments);

var layer = this.base.append('g').classed('error-bars', true);
    this.seriesLayer('ErrorBars', layer, {
      dataBind: function(data) {
        return this.selectAll('g')
          .data(data, this.key);
      },
      insert: function() {
        var group = this.append('g');

group.append('line').attr('class', 'error-bars-tick error-bars-top-tick');
        group.append('line').attr('class', 'error-bars-tick error-bars-bottom-tick');
        group.append('line').attr('class', 'error-bars-beam');

return group;
      },
      events: {
        enter: function() {
          var chart = this.chart();

this.select('.error-bars-bottom-tick')
            .attr('x1', chart.x1)
            .attr('y1', chart.bottomY)
            .attr('x2', chart.x2)
            .attr('y2', chart.bottomY);

this.select('.error-bars-top-tick')
            .attr('x1', chart.x1)
            .attr('y1', chart.topY)
            .attr('x2', chart.x2)
            .attr('y2', chart.topY);

this.select('.error-bars-beam')
            .attr('x1', chart.x)
            .attr('y1', chart.bottomY)
            .attr('x2', chart.x)
            .attr('y2', chart.topY);
        }
      }
    })
  },

tickWidth: d3c.helpers.property({
    default_value: 10
  }),

bottomY: d3c.helpers.di(function(chart, d, i) {
    return chart.yScale()(d.error[0]);
  }),
  topY: d3c.helpers.di(function(chart, d, i) {
    return chart.yScale()(d.error[1]);
  }),
  x1: d3c.helpers.di(function(chart, d, i) {
    return chart.x.call(this, d, i) - (chart.tickWidth() / 2);
  }),
  x2: d3c.helpers.di(function(chart, d, i) {
    return chart.x.call(this, d, i) + (chart.tickWidth() / 2);
  })
});

// Example chart
var chart = d3.select('#chart').chart('Compose', function(data) {
  var xScale = {data: data, key: 'x'};
  var yScale = {domain: [0, 100]};
  var charts = [
    d3c.lines({data: data, xScale: xScale, yScale: yScale}),
    {type: 'ErrorBars', data: data, xScale: xScale, yScale: yScale}
  ];
  var yAxis = d3c.axis({scale: yScale});

return [
    [yAxis, d3c.layered(charts)]
  ];
}).width(800).height(400);

chart.draw([
  {
    key: 'series-1',
    values: [
      {x: 10, y: 20, error: [15, 22]},
      {x: 50, y: 55, error: [52, 57]},
      {x: 100, y: 80, error: [60, 100]}
    ]  
  },
  {
    key: 'series-2',
    values: [
      {x: 10, y: 10, error: [9, 11]},
      {x: 50, y: 50, error: [49, 51]},
      {x: 100, y: 85, error: [84, 86]}
    ]  
  }
]);
</script>

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3.chart/0.2.1/d3.chart.min.js

https://npmcdn.com/d3.compose@0.15.13/dist/d3.compose-all.js