Let's build a bar chart - d3fc version

A re-implementation of Mike Bostock's classic "Let's Make a Bar Chart" example, using d3fc. This example highlights the power of the decorate pattern, with the bar colour changed on decorate, and value labels added.

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

.x-axis .domain {
  display: none;
}

.bar-label {
  text-anchor: middle;
  font-size: 12px;
  fill: black;
}
</style>

const isVowel = (letter) => 'AEIOU'.indexOf(letter) !== -1;

var barSeries = fc.autoBandwidth(fc.seriesSvgBar())
    .crossValue(d => d.letter)
		.align('left')
    .mainValue(d => d.frequency)
    .decorate((selection) => {
      selection.select('path')
        .style('fill', d => isVowel(d.letter) ? 'indianred' : 'steelblue');
      
      selection.enter()
        .append('text')
        .attr('class', 'bar-label')
        .attr('transform', 'translate(0, -5)')
        .text(d => d3.format('.1%')(d.frequency));
    });
  
d3.tsv("data.tsv", d => {
    d.frequency = +d.frequency;
    return d;
  }).then(data => {

var yExtent = fc.extentLinear()
    .accessors([d => d.frequency])
    .pad([0, 0.1])
    .include([0]);

var chart = fc.chartCartesian(
        d3.scaleBand(),
        d3.scaleLinear()
      )
      .xDomain(data.map(d => d.letter))
      .xPadding(0.2)
      .yDomain(yExtent(data))
      .yTicks(10, '%')
      .yOrient('left')
      .svgPlotArea(barSeries);

d3.select('#chart')
      .datum(data)
      .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