How to display second y-axis to right of grouped bar chart data in d3

Question

I am creating a grouped bar chart with d3 using the following example as my starting point. I've made a couple of minor modifications for readability as displayed in the screenshot below; the screenshot also demonstrates the issue I'm encountering.

I want to add a second y-axis but naturally I want it to be all the way over to the right. As you can see from the screenshot though it is to the right of the left-oriented y-axis but also adjacent to it instead of to the right of the data.

What I did to get where I am is to add the following (note orient("right"))

var yRight = d3.svg.axis()
    .scale(y)
    .orient("right");

Then I applied the following append, even at the very end of the Javascript source code in case order matters, but to no avail. I based both things on how the (left) yAxis was being handled, but clearly there is something further that needs doing in order to move the second y axis all the way to the right of the actual chart.

svg.append("g")
    .attr("class", "y axis")
    .call(yRight);

Answer 1

Based on this other example I found my answer, and that was to add a transform/translate clause as follows:

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + width + " ,0)")
    .call(yRight);

I'm completely new to d3 though so some explanation of what transform/translate do from d3 experts in the comments would definitely improve the quality of this Q&A.