xxxxxxxxxx
<!-- 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>
<style>
#chart {
width: 100%;
height: 500px;
}
.x-axis .domain {
display: none;
}
</style>
<div id="chart"></div>
<script type='text/babel'>
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