<div id="main"></div>

#main {
  width: 300px;
  height: 300px;
}

svg .arc-background {
  fill: #dddddd;
}
svg .reading {
    font-size: 48px;
}
svg .arc {
  fill: #f44336;
  transition: fill 0.4s ease;
}

const startAngle = -1 * (Math.PI / 3);
const endAngle = Math.PI / 3;

const dial = d3_shape.arc()
            .startAngle(startAngle)
            .endAngle(endAngle)
            .innerRadius(80)
            .outerRadius(145);

const scale = d3_scale.scaleLinear().domain([0, 100]).range([startAngle, endAngle]);

const Chart = React.createClass({
    render() {
        const width = 300,
            height = 300,
            transform = `translate(${width * 0.5},${0.65 * height})`,
            current = (x) => dial.endAngle(scale(x))();

        return (
            <svg viewBox={`0 0 ${width} ${height}`}>
                <path fill="#dddddd" d={dial()} transform={transform}/>
                <path fill="#f44336" d={current(this.props.fill)} transform={transform}/>
            </svg>
        );
    }
});

ReactDOM.render(<Chart fill={60}/>, document.getElementById("main"));