d3v4 - Stacked Bar Chart

Remake of Mike Bostock's Stacked Bar Chart

What I learned:

How d3.stack layout works
Stack creates an array of layers - each layer is an of coordinates (one array per 'key')
Coordinates [y, y1] specify top and bottom of rectangle
Can use ordinal scale to generate colors for "layers" of stack
Used band scale for x (time) - Band scales are like ordinal scales except the output range is continuous and numeric.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .axis text {
      font: 10px sans-serif;
    }

.axis line,
    .axis path {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

.axis--x path {
      display: none;
    }
  </style>
</head>

<body>
  <script>
const causes = ['wounds', 'other', 'disease']
const parseDate = d3.timeParse('%m/%Y')
const margin = { top: 20, right: 50, bottom: 30, left: 20 }
const width = 960 - margin.left -margin.right
const height = 500 - margin.top - margin.bottom

const x = d3.scaleBand()
	.rangeRound([0, width])

const y = d3.scaleLinear()
	.rangeRound([height, 0])

const z = d3.scaleOrdinal(d3.schemeCategory10)

const xAxis = d3.axisBottom()
	.scale(x)
	.tickFormat(d3.timeFormat('%b'))

const yAxis = d3.axisRight()
	.scale(y)

const svg = d3.select('body')
	.append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append('g')
	.attr('transform', `translate(${margin.left},${margin.top})`)

const type = (d) => {
	d.date = parseDate(d.date)
	causes.forEach(c => {
		d[c] = +d[c]
	})
	return d
}

d3.tsv('crimea.tsv', type, (crimea) => {

const layers = d3.stack()
	.keys(causes)
	(crimea)

x.domain(layers[0].map(d => d.data.date))

y.domain([0, d3.max(layers[layers.length - 1], d => (d[0] + d[1]) )]).nice()

const layer = svg.selectAll('layer')
		.data(layers)
		.enter()
		.append('g')
		.attr('class', 'layer')
		.style('fill', (d, i) => (z(i) ))

layer.selectAll('rect')
		.data(d => d)
		.enter()
		.append('rect')
		.attr('x', d => x(d.data.date))
		.attr('y', d => y(d[0] + d[1]))
		.attr('height', d => y(d[0]) - y(d[1] + d[0]))
		.attr('width', x.bandwidth() - 1)

svg.append('g')
		.attr('class', 'axis axis--x')
		.attr('transform', `translate(0,${height})`)
		.call(xAxis)

svg.append('g')
		.attr('class', 'axis axis--y')
		.attr('transform', `translate(${width},0)`)
		.call(yAxis)
})

</script>
</body>

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