axis.ticks() as a getter returns an array, not a number.

Therefore, this...

var ticksCount = yAxis.ticks();

... returns the number of ticks (which is 10) as an array ([10]). Then, when you try to add 1 to this array, look what happens:

console.log([10] + 1)

You end up with 101 ticks (note: 101 here is actually a string, not a number). That's why you said that "the y axis is now blurred". It's not blurred, you just have a humongous amount of ticks.

You may think that you should do:

var ticksCount = yAxis.ticks()[0];
//get the element -------------^ 
yAxis.ticks(ticksCount + 1);

But that will make no difference: you will have more ticks in the axis, but the minimum/maximum in the axis will be the same.

Solution: change the domain instead:

yScale = d3.scale.linear()
    .range([height -,
    ]).domain([0, max_y * 1.05])
    //add 5% to the top ----^

Related Query

More Query from same tag