d3 stacked bar

_.md

[ Launch: Tributary inlet ] a485bc474a126cb015b5 by cmackay

config.json

{"description":"d3 stacked bar","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/SEzUGVk.gif"}

inlet.js

var data = [{
  key: 'Category A',
  values: [{
    'x': '2015-01-01T08:00:00+00:00',
    'y': 185
  }, {
    'x': '2015-02-01T08:00:00+00:00',
    'y': 450
  }, {
    'x': '2015-03-01T08:00:00+00:00',
    'y': 450
  }, {
    'x': '2015-04-01T08:00:00+00:00',
    'y': 400
  }, {
    'x': '2015-05-01T08:00:00+00:00',
    'y': 530
  }, {
    'x': '2015-06-01T08:00:00+00:00',
    'y': 550
  }]
}, {
  key: 'Category B',
  values: [{
    'x': '2015-01-01T08:00:00+00:00',
    'y': 500
  }, {
    'x': '2015-02-01T08:00:00+00:00',
    'y': 400
  }, {
    'x': '2015-03-01T08:00:00+00:00',
    'y': 1300
  }, {
    'x': '2015-04-01T08:00:00+00:00',
    'y': 1350
  }, {
    'x': '2015-05-01T08:00:00+00:00',
    'y': 1400
  }, {
    'x': '2015-06-01T08:00:00+00:00',
    'y': 1450
  }]
}, {
  key: 'Category C',
  values: [{
    'x': '2015-01-01T08:00:00+00:00',
    'y': 300
  }, {
    'x': '2015-02-01T08:00:00+00:00',
    'y': 200
  }, {
    'x': '2015-03-01T08:00:00+00:00',
    'y': 200
  }, {
    'x': '2015-04-01T08:00:00+00:00',
    'y': 150
  }, {
    'x': '2015-05-01T08:00:00+00:00',
    'y': 200
  }, {
    'x': '2015-06-01T08:00:00+00:00',
    'y': 247
  }]
}];

var opts = {
  width  : 742,
  height : 596,
  margin: {
    top    : 40,
    right  : 60,
    bottom : 40,
    left   : 96
  },
  colors: [
    '#26dd2c',
    '#dcdc09',
    '#f7075f'
  ],
  axis: {
    x: {
      tickFormat: d3.time.format.utc('%-m/%y')
    },
    y: {
      tickFormat: d3.format('-$,f')
    }
  }
};

d3.select('body').style('background', '#fff');

var stack = d3.layout.stack()
    .values(function (d) {
      return d.values;
    }),
    layers     = stack(data),
    plotWidth  = opts.width - opts.margin.left - opts.margin.right,
    plotHeight = opts.height - opts.margin.top - opts.margin.bottom;

var x = d3.scale.ordinal()
	.rangeBands([0, plotWidth], 0.31008);

var y = d3.scale.linear()
	.range([plotHeight, 0]);

var color = d3.scale.ordinal()
	.range(opts.colors);

var xAxis = d3.svg.axis()
  .scale(x)
  .tickFormat(opts.axis.x.tickFormat)
  .orient('bottom');

var yAxis = d3.svg.axis()
  .scale(y)
  .tickFormat(opts.axis.y.tickFormat)
  .orient('left');

data.map(function (stack) {
  stack.values.map(function (value) {
    // convert to date object
    value.x = d3.time.format.iso.parse(value.x);
    return value;
  });
  return stack;
});

x.domain(data[0].values.map(function (v) { return v.x; }));
y.domain([0, d3.max(layers, function (layer) {
  // max is largest combined bar
  return d3.max(layer.values, function (d) {
    return d.y0 + d.y;
  });
})]);

var svg = d3.select('svg')
  .attr('width', opts.width)
  .attr('height', opts.height)
  .append('g')
  .attr('transform', function () {
    return 'translate(' + opts.margin.left + ',' + opts.margin.top + ')';
  });

svg.append('g')
  .attr('class', 'y axis')
  .call(yAxis);

svg.selectAll('.y.axis g.tick')
  .append('line')
  .attr('class', 'grid-line')
  .classed('baseline', function (d) {
    return d === 0;
  })
  .attr('stroke', '#000')
  .attr('x1', 0)
  .attr('y1', 0)
  .attr('x2', plotWidth)
  .attr('y2', 0);

svg.append('g')
  .attr('class', 'x axis')
  .attr('transform', 'translate(0,' + plotHeight + ')')
  .call(xAxis);

var layer = svg.selectAll('.stack')
  .data(layers)
  .enter()
  .append('g')
  .attr('class', 'stack')
  .style('fill', function (d, i) {
    return color(i);
  });

var rect = layer.selectAll('rect')
  .data(function (d) {
    return d.values;
  })
  .enter()
  .append('rect')
  .attr('class', 'bar')
  .attr('x', function (d) {
    return x(d.x);
  })
  .attr('y', function (d) {
    return y(d.y0 + d.y);
  })
  .attr('width', x.rangeBand)
  .attr('height', function (d) {
    return y(d.y0) - y(d.y0 + d.y);
  });