Stacked Chart

This example demonstrates a stacked bar chart using energy production data from eurostat. The chart is constructed from the following components:

A Cartesian chart, with an ordinal y axis and a linear x axis.
The data is prepared using a D3 stack layout, which stacks the 'y' values.
The data is rendered via a horizontally oriented stacked bar series. The auto bandwidth component is used to obtain the bandwidth for the bar series from the y-oriented band scale.
A legend, courtesy of the d3-legend project.

<!DOCTYPE html>

<script src="//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="//unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>

<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>

var color = d3.scaleOrdinal(d3.schemeCategory10)
    .domain(series.map(s => s.key));
  
  console.log(series.map(s => s.key))

var legend = d3.legendColor()
    .shapeWidth(70)
    .orient('horizontal')
    .scale(color);
  
  // render the legend
  d3.select('#legend')
    .call(legend);

var barSeries = fc.autoBandwidth(fc.seriesSvgBar())
    .orient('horizontal')
  	.align('left')
    .crossValue(d => d.data.Country)
    .mainValue(d => d[1])
    .baseValue(d => d[0]);

var multi = fc.seriesSvgMulti()
    .mapping((data, index) => data[index])
    .series(series.map(() => barSeries))
    .decorate((selection) => {
      selection.each((data, index, nodes) => {
        d3.select(nodes[index])
          .selectAll('g.bar')
          .attr('fill', color(series[index].key));
      });
    });

var xExtent = fc.extentLinear()
    .accessors([function(a) {
      return a.map(function(d) { return d[1]; });
    }])
    .pad([0, 1])
    .padUnit('domain');

var chart = fc.chartCartesian(
      d3.scaleLinear(),
      d3.scaleBand())
    .xDomain(xExtent(series))
    .yDomain(data.map((entry) => entry.Country))
  	.yPadding([0.2])
    .yOrient('left')
    .xLabel('Million tonnes of oil equivalent')
    .chartLabel('2013 Energy Production')
    .svgPlotArea(multi);
  
  d3.select('#chart')
    .text(null) // Remove the loading text from the container
    .datum(series)
    .call(chart);

});
</script>

https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js

https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js

https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js

https://unpkg.com/babel-standalone@6/babel.min.js

https://unpkg.com/d3@5.5.0

https://unpkg.com/d3fc@14.0.41

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.18.0/d3-legend.js