vasco3/gist:029e228de69bf73dfc4e

## gistfile1.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React + D3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> .arc path {stroke: #fff;} </style>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.8.0/JSXTransformer.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.js"></script>
  </head>
  <body>
    <div id="container"></div>

    <script type="text/jsx">
      /** @jsx React.DOM */

         var Chart = React.createClass({
        render: function() {
          return (
            <svg width={this.props.width} height={this.props.height}>{this.props.children}</svg>
          );
        }
      });

      var Sector = React.createClass({
        render: function() {
          var arc = d3.svg.arc()
              .outerRadius(70)
              .innerRadius(50);
          return (
            <g className="arc">
              <path d={arc(this.props.data)} style={this.props.style} fill={this.props.fill}></path>
            </g>
          );
        }
      });
 //stroke : ['#0E8600', '#aC0000' , '#bbb']
      var DataSeries = React.createClass({
        render: function() {
          var colors = {
              fill : ['#53a906', '#d70000' , '#eee'],
              stroke : ['#fff', '#fff' , '#fff']
              };


          var pie = d3.layout.pie();
          var bars = _.map(pie(this.props.data), function(point, i) {
              var style = {
                  strokeWidth: '3px',
                  stroke: colors.stroke[i]
              }
            return (
              <Sector data={point} key={i} style={style} fill={colors.fill[i]} />
            )
          });

          return (
            <g transform="translate(100, 100)">{bars}</g>
          );
        }
      });

      var PieChart = React.createClass({
        getDefaultProps: function() {
          return {
            width: 300,
            height: 300
          };
        },
        render: function() {

          return (
            <Chart width={this.props.width} height={this.props.height}>
              <DataSeries data={data} width={this.props.width} height={this.props.height}  />
            </Chart>
          );
        }
      });

      // up, down, incomplete
      var data = [ 6, 2, 1]

      React.render(
        <PieChart data={data}/>,
        document.body
      );
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>React + D3</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style> .arc path {stroke: #fff;} </style>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.8.0/JSXTransformer.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.js"></script>
	</head>
	<body>
	<div id="container"></div>

	<script type="text/jsx">
	/** @jsx React.DOM */

	var Chart = React.createClass({
	render: function() {
	return (
	<svg width={this.props.width} height={this.props.height}>{this.props.children}</svg>
	);
	}
	});

	var Sector = React.createClass({
	render: function() {
	var arc = d3.svg.arc()
	.outerRadius(70)
	.innerRadius(50);
	return (
	<g className="arc">
	<path d={arc(this.props.data)} style={this.props.style} fill={this.props.fill}></path>
	</g>
	);
	}
	});
	//stroke : ['#0E8600', '#aC0000' , '#bbb']
	var DataSeries = React.createClass({
	render: function() {
	var colors = {
	fill : ['#53a906', '#d70000' , '#eee'],
	stroke : ['#fff', '#fff' , '#fff']
	};


	var pie = d3.layout.pie();
	var bars = _.map(pie(this.props.data), function(point, i) {
	var style = {
	strokeWidth: '3px',
	stroke: colors.stroke[i]
	}
	return (
	<Sector data={point} key={i} style={style} fill={colors.fill[i]} />
	)
	});

	return (
	<g transform="translate(100, 100)">{bars}</g>
	);
	}
	});

	var PieChart = React.createClass({
	getDefaultProps: function() {
	return {
	width: 300,
	height: 300
	};
	},
	render: function() {

	return (
	<Chart width={this.props.width} height={this.props.height}>
	<DataSeries data={data} width={this.props.width} height={this.props.height} />
	</Chart>
	);
	}
	});

	// up, down, incomplete
	var data = [ 6, 2, 1]

	React.render(
	<PieChart data={data}/>,
	document.body
	);
	</script>
	</body>
	</html>