React Base Fiddle (JSX)

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

by Zap Lin

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="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<h3>React D3 - Donut chart</h3>

<div id="container"></div>

<address><br>by <a href="https://github.com/LinZap/" target="_blank">Zap</a></address>

CSS

body{
  text-align: center;
}

svg{
  display: block;
  margin: 0 auto;
}

JavaScript 1.7

/*
  	React D3 Chart Component
*/
class Donut extends React.Component{

	constructor(props) {
		super(props)
	}
	componentDidMount(){
  		var el = ReactDOM.findDOMNode(this),
      		mypie = new d3dount(el)     
      mypie.render(this.props.data)
  }
	render(){
  	return <svg/>
  }
 
}


/*
  	constructor
    @el: svg tag on dom
    @data: pie data
*/
class d3dount{

	constructor(el){
  	this.svg = d3.select(el)
  }
  
  render(data){
  
    let width = 300,
    		height = 230,   
    		color = d3.scale.category20(),
    		pie = d3.layout.pie(),
              
    		arc = d3.svg.arc()
        			.innerRadius(height/2-30)
							.outerRadius(height/2),
              
        g = this.svg
        			.attr('width', width)
							.attr('height', height)
        			.append('g')
        			.attr('transform',`translate( ${width/2} , ${height/2} )`),
        
        path = g.selectAll('path')
        			.data(pie(data))
              .enter()
              .append('path')
							.attr('d',arc)
              .attr('fill', (d, i)=>color(i))
  }
  
}




var data = [
				Math.floor(Math.random() * 100),
				Math.floor(Math.random() * 100),
				Math.floor(Math.random() * 100),
				Math.floor(Math.random() * 100)
  	]
    
    
ReactDOM.render(
  <Donut data={data}/>,
  document.getElementById('container')
);