score:1

Accepted answer

Regarding the y axis: you're not translating it from the origin position. It should be:

 d3.select("svg")
    .append("g")
    .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:

  d3.select("svg")
    .append("g")
    .attr("transform", "translate(0," + (height - 30) + ")")//30 is just an example
    .call(d3.axisBottom(xAxis)); 

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