D3 Examples - Letter Frequency

Letter Frequency

D3 2.10 adds support for optional outer padding with d3.scale.ordinal. This parameter allows you to control the outer padding (before the first bar and after the last bar) separately from the inner padding between bars. In this case, the inner padding is 10% and the outer padding is 20%.

var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1, .2);

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.bar {
  fill: steelblue;
}
​
.x.axis path {
  display: none;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v2.min.js?2.10.0"></script>
<script>
​
var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
var x = d3.scale.linear()
    .range(["red", "green"]);
​
var y = d3.scale.linear()
    .range([height, 0]);
​
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
d3.tsv("letter-frequency.tsv", function(letters) {
  letters.forEach(function(d) { d.frequency = +d.frequency; });
  x.domain(letters.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(letters, function(d) { return d.frequency; })]);
​
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.svg.axis().scale(x).orient("bottom"));
​
  svg.append("g")
      .attr("class", "y axis")
      .call(d3.svg.axis().scale(y).orient("left"));
​
  svg.selectAll(".bar")
      .data(letters)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return height - y(d.frequency); });
});
​
</script>
    