D3 Examples - d3fc grouped bar chart

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- include polyfills for custom event, Symbol and Custom Elements -->
<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>
​
<!-- use babel so that we can use arrow functions and other goodness in this block! -->
<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>
​
<script src="//unpkg.com/d3@5.5.0"></script>
<script src="//unpkg.com/d3fc@14.0.41"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.18.0/d3-legend.min.js"></script>
​
<style>
  body {
    font: 10px sans-serif;
  }
​
  #chart {
    width: 100%;
    height: 500px;
    position: relative;
  }
​
  #chart .legend {
    position: absolute;
    bottom: auto;
    right: 0;
    left: auto;
    top: 0;
    width: 170px;
  }
​
  .x-axis .domain {
    display: none;
  }
</style>
<body>
  
<div id="chart"></div>
​
<script type='text/babel'>
​
var color = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
​
var legend = d3.legendColor()
  .orient('vertical')
  .shapeWidth(20)
  .scale(color);
​
var yExtent = fc.extentLinear()
  .accessors([(d) => d.map((e) => e[1])])
  .include([0]);
​
d3.csv("data.csv").then(data => {
​
  var group = fc.group()
    .key("State");
  var series = group(data);
​
  var ages = series.map(d => d.key);
  color.domain(ages);
​
  var groupedBar = fc.seriesSvgGrouped(fc.seriesSvgBar())
      .crossValue(d => d[0])
      .mainValue(d => d[1])
      .bandwidth (120)
      .decorate((sel, data, index) => {
        sel.enter()
          .select('path')
          .attr('fill', color(ages[index]));
      });
​
  var chart = fc.chartCartesian(
        d3.scalePoint(),
        d3.scaleLinear()
      )
      .xDomain(data.map(d => d.State))
      .xPadding(0.5)
      .yDomain(yExtent(series))
      .yTickFormat(d3.format(".2s"))
      .yOrient('left')
      .svgPlotArea(groupedBar)
      .decorate((selection) => {
        selection.enter()
          .append('svg')
          .attr('class', 'legend');
​
        selection.select('.legend')
          .call(legend);
      });
​
  d3.select('#chart')
      .datum(series)
      .call(chart);
});
​
</script>
​
    