The problem is that you're assigning the scale to the axis before defining it. Doing it in this order works fine:
var widthScale = d3.scale.linear()
.domain([0, 120])
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(widthScale);
You probably also want to append the bars to the SVG itself, not the g
element that contains the axis. To do that, simply split the definition of canvas
and the appending of the axis:
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
canvas.append("g")
.attr("transform", "translate(20, 0)")
.call(xAxis);
Complete demo here.