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://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://unpkg.com/react-motion/build/react-motion.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;
}

JavaScript 1.7

var Motion = ReactMotion.Motion;
var spring = ReactMotion.spring;

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

var Chart = React.createClass({
  getInitialState() {
    return {
    	dataset: 'apples'
    }
  },
  setDataset(e) {
  	this.setState({
    	dataset: e.target.value
    });
  },
  render: function() {
    var width = 640,
        height = 300,
        radius = Math.min(width, height) / 2;
    
    var color = d3.scale.category20();
    
    var pie = d3.layout.pie()
        .value(d => d[this.state.dataset])
        .sort(null);
    
    var arc = d3.svg.arc()
        .innerRadius(radius - 100)
        .outerRadius(radius - 20);
        
    var displayedData = pie(this.props.data);
    var springParams = { stiffness: 300, damping: 6 };
        
    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) =>
              <Motion
              	key={i}
              	defaultStyle={{
                	startAngle: slice.startAngle,
                	endAngle: slice.endAngle,
                	padAngle: slice.padAngle,
                }}
              	style={{
              	  startAngle: spring(slice.startAngle, springParams),
              	  endAngle: spring(slice.endAngle, springParams),
              	  padAngle: spring(slice.padAngle, springParams)
              	}}>{value => <path
              		fill={color(i)}
...