lordkebab/index.html

## index.html
<html>
  <div id="chart"></div>
  <script>
data = [
  {month: 1, lemons: 12, limes: 23},
  {month: 2, lemons: 58, limes: 8}
];

var svgWidth = 400;
var svgHeight = 400;
var margins = {top: 20, bottom: 20, right: 20, left: 20};
var h = svgHeight - margins.top - margins.bottom;
var w = svgWidth - margins.left - margins.right;

var colors = ['yellow', 'green'];

var stack = d3.stack().keys(['lemons', 'limes']);
var series = stack(data);

var y = d3.scaleLinear().domain([0, 100]).range([100, 0]);

d3.select('#chart').append('svg').attr('width', svgWidth).attr('height', svgHeight);

var g = d3.select('svg')
  .selectAll('g.series')
  .data(series)
  .enter()
  .append('g').classed('series', true)
    .style('fill', (d, i) => colors[i]);

g.selectAll('rect')
  .data(d => d)
  .enter()
  .append('rect')
    .attr('width', 19)
    .attr('height', d => y(d[1] - d[0]) )
    .attr('x', (d, i) => i * 20)
    .attr('y', d => d[0] )
  </script>
</html>
	<html>
	<div id="chart"></div>
	<script>
	data = [
	{month: 1, lemons: 12, limes: 23},
	{month: 2, lemons: 58, limes: 8}
	];

	var svgWidth = 400;
	var svgHeight = 400;
	var margins = {top: 20, bottom: 20, right: 20, left: 20};
	var h = svgHeight - margins.top - margins.bottom;
	var w = svgWidth - margins.left - margins.right;

	var colors = ['yellow', 'green'];

	var stack = d3.stack().keys(['lemons', 'limes']);
	var series = stack(data);

	var y = d3.scaleLinear().domain([0, 100]).range([100, 0]);

	d3.select('#chart').append('svg').attr('width', svgWidth).attr('height', svgHeight);

	var g = d3.select('svg')
	.selectAll('g.series')
	.data(series)
	.enter()
	.append('g').classed('series', true)
	.style('fill', (d, i) => colors[i]);

	g.selectAll('rect')
	.data(d => d)
	.enter()
	.append('rect')
	.attr('width', 19)
	.attr('height', d => y(d[1] - d[0]) )
	.attr('x', (d, i) => i * 20)
	.attr('y', d => d[0] )
	</script>
	</html>