d3.js diagram line is larger than range - d3.js

Question

I`m using a d3.js linechart with the following code:
var data = [{"age":"3","compositions":"1"},{"age":"5","compositions":"6"},{"age":"6","compositions":"5"},{"age":"7","compositions":"4"},{"age":"8","compositions":"9"},{"age":"9","compositions":"7"},{"age":"10","compositions":"16"},{"age":"11","compositions":"11"},{"age":"12","compositions":"11"},{"age":"13","compositions":"12"},{"age":"14","compositions":"19"},{"age":"15","compositions":"15"},{"age":"16","compositions":"30"},{"age":"17","compositions":"29"},{"age":"18","compositions":"21"},{"age":"19","compositions":"22"},{"age":"20","compositions":"29"},{"age":"21","compositions":"24"},{"age":"22","compositions":"28"},{"age":"23","compositions":"19"},{"age":"24","compositions":"13"},{"age":"25","compositions":"25"},{"age":"26","compositions":"36"},{"age":"27","compositions":"29"},{"age":"28","compositions":"23"},{"age":"29","compositions":"26"},{"age":"30","compositions":"24"},{"age":"31","compositions":"30"},{"age":"32","compositions":"33"},{"age":"33","compositions":"20"},{"age":"34","compositions":"9"},{"age":"35","compositions":"30"}]
var margin = {
top : 70,
right : 20,
bottom : 50,
left : 50
}, width = 460, height = 230;
var x = d3.scale.linear().range([0, width ]);
var y = d3.scale.linear().range([ height, 0 ]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
var line = d3.svg.line().x(function(d) {
return x(d.age);
}).y(function(d) {
return y(d.compositions);
});
var svg = d3
.select(".linechartAgePublicationsComposer")
.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 + ")");
data.forEach(function(d) {
d.age = d.age;
d.compositions = +d.compositions;
});
x.domain(d3.extent(data, function(d) {
return d.age;
}));
y.domain(d3.extent(data, function(d) {
return d.compositions;
}));
svg.append("g").attr("class", "x axis").attr("transform",
"translate(0," + height + ")").call(xAxis);
svg.append("g").attr("class", "y axis").call(yAxis).append("text")
.attr("transform", "rotate(-90)").attr("y", 6).attr("dy",
".71em").style("text-anchor", "end").text(
"Compositions");
svg.append("path").datum(data).attr("class", "line")
.attr("d", line);
when I execute it the line is out of the set range as in the picture and the y-axis has the wrong kind of direction.
Why is the line not within the range and goes from 9 to 10 only?

Answer 1

You should convert the age attribute to number, as you are doing with the composition attribute:
data.forEach(function(d) {
d.age = +d.age;
d.compositions = +d.compositions;
});

Answer 2

The d3.extent will return the minimum and maximum value in the given array using natural order. In your case you're not casting strings to numbers, so obviously the lowest string is "10" and the highest is "9". Thus, to fix the issue with the range, just cast the age to numbers as in the following example. I'm suggesting using parseInt
x.domain(d3.extent(data, function(d) {
return parseInt(d.age, 10);
}));