React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by tmcw

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 100%;
}

text {
  font: 10px sans-serif;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

Babel + JSX

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')
);