| license: gpl-3.0 |
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], 0.1, 0.2);See also this updated version with an axis title.
| <!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="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| // Update to accept width and height | |
| // put redraw into a method | |
| class BarChart { | |
| constructor(filename, width, height) { | |
| this.width = width; | |
| this.height = height; | |
| this.filename = filename; | |
| this.setup(); | |
| } | |
| start() { | |
| this.grabData(this.filename, this.update.bind(this)) | |
| } | |
| grabData(filename, cb) { | |
| d3.tsv(filename, type, cb) | |
| } | |
| setup() { | |
| var margin = {top: 20, right: 30, bottom: 30, left: 40}; | |
| this.width = this.width - margin.left - margin.right, | |
| this.height = this.height - margin.top - margin.bottom; | |
| this.x = d3.scale.ordinal() | |
| .rangeRoundBands([0, this.width], 0.1, 0.2); | |
| this.y = d3.scale.linear() | |
| .range([this.height, 0]); | |
| this.svg = d3.select("body").append("svg") | |
| .attr("width", this.width + margin.left + margin.right) | |
| .attr("height", this.height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| } | |
| update(error, letters) { | |
| console.log(error); | |
| // need to pull these out for d3 overwrites `this` in all of its callbacks | |
| var x = this.x; | |
| var y = this.y; | |
| var height = this.height; | |
| x.domain(letters.map(function (d) { | |
| return d.letter; | |
| })); | |
| y.domain([0, d3.max(letters, function (d) { | |
| return d.frequency; | |
| })]); | |
| this.svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + this.height + ")") | |
| .call(d3.svg.axis().scale(x).orient("bottom")); | |
| this.svg.append("g") | |
| .attr("class", "y axis") | |
| .call(d3.svg.axis().scale(y).orient("left")); | |
| this.svg.selectAll(".bar") | |
| .data(letters) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", function (d) { | |
| return x(d.letter); | |
| }) | |
| .attr("width", this.x.rangeBand()) | |
| .attr("y", function (d) { | |
| return y(d.frequency); | |
| }) | |
| .attr("height", function (d) { | |
| return height - y(d.frequency); | |
| }); | |
| } | |
| } | |
| function type(d) { | |
| d.frequency = +d.frequency; | |
| return d; | |
| } | |
| var chart = new BarChart("letter-frequency.tsv", 960, 500); | |
| chart.start(); | |
| </script> |
| letter | frequency | |
|---|---|---|
| A | .08167 | |
| B | .01492 | |
| C | .02780 | |
| D | .04253 | |
| E | .12702 | |
| F | .02288 | |
| G | .02022 | |
| H | .06094 | |
| I | .06973 | |
| J | .00153 | |
| K | .00747 | |
| L | .04025 | |
| M | .02517 | |
| N | .06749 | |
| O | .07507 | |
| P | .01929 | |
| Q | .00098 | |
| R | .05987 | |
| S | .06333 | |
| T | .09056 | |
| U | .02758 | |
| V | .01037 | |
| W | .02465 | |
| X | .00150 | |
| Y | .01971 | |
| Z | .00074 |
