D3 Examples - d3v4 - Stacked Bar Chart

d3v4 - 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.

xxxxxxxxxx
 
<!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>
​
    