Multiple pie charts update with only one input d3.js

Question

I modified Mike Bostock's Pie Chart Update III in order to get two different pie charts in one using two elements with one csv file for each chart.

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

var leftG = svg.append("g")
              .attr("transform", "translate(" + width / 4 + "," + height / 2 + ")");

var rightG = svg.append("g")
                .attr("transform", "translate(" + 3 * (width / 4) + "," + height / 2 + ")");

I want to have each radio button updating both pie charts. Now my problem is that the update inputs only alter the second pie chart.

I can't figure out how to do this since the change() function is inside the d3.csv() function and one cannot access the other.

  d3.selectAll("input")
  .on("change", changeLeft);

  function changeLeft() {
    var value = this.value;
    pieLeft.value(function(d) { return d[value]; }); // change the value function
    pathLeft = pathLeft.data(pieLeft); // compute the new angles
    pathLeft.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  }

Thanks in advance.

EDIT : Here is my plnkr

Answer 1

declare a global variable

var changeLeft;

Replace your function with the below one and it will work:

 changeLeft = function() {
        var value = this.value;
        pieLeft.value(function(d) { return d[value]; }); // change the value function
        pathLeft = pathLeft.data(pieLeft); // compute the new angles
        pathLeft.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
      }