Edit in JSFiddle

var data = [
  { apples: 53245, oranges:	200 },
  { apples: 28479, oranges:	200 },
  { apples: 19697, oranges:	200 },
  { apples: 24037, oranges:	200 },
  { apples: 40245, oranges:	200 }
];

class Chart extends React.Component {
  state = {
  	dataset: 'apples'
  };
  setDataset = e => {
  	this.setState({
    	dataset: e.target.value
    });
  };
  render() {
    var width = 640,
        height = 300,
        radius = Math.min(width, height) / 2;
    
    var color = d3.schemeCategory10;
    
    var pie = d3.pie()
        .value(d => d[this.state.dataset])
        .sort(null);
    
    var arc = d3.arc()
        .innerRadius(radius - 100)
        .outerRadius(radius - 20);
        
    var displayedData = pie(this.props.data);
        
    return <div>
      <form>
        <label><input type="radio"name="dataset" value="apples"
          onChange={this.setDataset}
          checked={this.state.dataset == 'apples'} /> Apples</label>
        <label><input type="radio" name="dataset" value="oranges"
          onChange={this.setDataset}
          checked={this.state.dataset == 'oranges'} /> Oranges</label>
      </form>
      <svg width={width} height={height}>
      	<g transform={"translate(" + width / 2 + "," + height / 2 + ")"}>
        	{displayedData.map((slice, i) =>
          	<path
            	fill={color[i]}
            	key={i}
              d={arc(slice)} />
          )}
        </g>
      </svg>
    </div>;
  }
};

ReactDOM.render(
  <Chart data={data} />,
  document.getElementById('container')
);