Accepted answer

Regarding the y axis: you're not translating it from the origin position. It should be:"svg")
    .attr("transform", "translate(30, 0)")//30 here is just an example
    .call(d3.axisLeft(yAxis).ticks(10, "%")); 

Regarding the x axis: you're translating it all the way down to the height. It should be less than that:"svg")
    .attr("transform", "translate(0," + (height - 30) + ")")//30 is just an example

In a nutshell: set the margins properly and translate the axis according to those margins.

PS: nothing will show up in the ticks, because you don't have letter or frequency in your data.

Related Query