JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<div id="container" style="width: 250px; height: 250px;"></div>

Babel + JSX

class Pie extends React.Component {
  render() {
    const pie = d3.layout.pie()
      .value(d => d.value);
    const arc = d3.svg.arc()
      .outerRadius(50);
  
    return (
    	<svg viewBox="0 0 100 100">
        <g transform={`translate(50,50)`}>
          {pie(this.props.data).map((slice, index) =>
            <path
              key={index}
              d={arc(slice)}
              fill={this.props.data[index].color}
            />
          )}
        </g>
      </svg>
    );
  
  }
}

React.render(<Pie data={[
  { value: 1, color: "red" },
  { value: 2, color: "blue" }
]} />, document.getElementById("container"));