react d3 layout arc

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script src="http://d3js.org/d3.v3.min.js"></script>
  </head>

  <body>
    <div id="example"></div>
    <script src="./script.js" type="text/babel"></script>
  </body>

</html>

// Code goes here

var ArcSvg  = React.createClass({
  render:function(){
    var arc = d3.svg.arc()
          .innerRadius(100).outerRadius(150)
          .startAngle(-Math.PI / 2).endAngle(Math.PI /2),
        styles={
          stroke:'black',
          strokeWidth:'2px',
          fill:'red',
        };
    return (
     <svg>
     <path style={styles} d={arc()} transform='translate(200,200)'></path>
     </svg>
    );
  }
});



ReactDOM.render(< ArcSvg />,document.getElementById('example'));

/* Styles go here */