D3 Examples - Let's build a bar chart

xxxxxxxxxx
 
<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
<script src="https://d3fc.io/lib/d3fc.min.js"></script>
<style>
#chart {
  width: 100%;
  height: 500px;
}
​
.bar {
  fill: steelblue;
}
​
.x-axis .domain {
  display: none;
}
</style>
​
<div id="chart"></div>
​
<script>
​
var barSeries = fc.seriesSvgBar()
    .barWidth(fc.seriesFractionalBarWidth(0.9))
    .crossValue(function(d) { return d.letter; })
    .mainValue(function(d) { return d.frequency; });
​
d3.tsv("data.tsv", function(d) {
  d.frequency = +d.frequency;
  return d;
}, function(error, data) {
​
  var yExtent = fc.extentLinear()
    .accessors([function(d) { return d.frequency; }])
    .pad([0, 0.1])
    .include([0]);
​
  var chart = fc.chartSvgCartesian(
        d3.scalePoint(),
        d3.scaleLinear()
      )
      .xDomain(data.map(function(d) { return d.letter; }))
      .xPadding(0.5)
      .yDomain(yExtent(data))
      .yTicks(10, '%')
      .yOrient('left')
      .plotArea(barSeries);
​
  d3.select('#chart')
      .datum(data)
      .call(chart);
});
</script>
    