Let's build a bar chart - d3fc canvas version

<!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;
}
</style>

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

var barSeries = fc.autoBandwidth(fc.seriesCanvasBar())
    .crossValue(d => d.letter)
		.align('left')
    .mainValue(d =>  d.frequency)
    .decorate((context, datum) => {
      context.textAlign = 'center';
      context.fillStyle = '#000';
      context.font = '12px Arial';
      context.fillText(d3.format('.1%')(datum.frequency), 0, -8);
      context.fillStyle = isVowel(datum.letter) ? 'indianred' : 'steelblue';
    });

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.1)
      .yDomain(yExtent(data))
      .yTicks(10, '%')
      .yOrient('left')
      .canvasPlotArea(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