JSFiddle - React, Tailwind, and code Playground

by CoolBlue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

JavaScript

var spec = {innerRadius: 0, outerRadius: 50, startAngle: 0, endAngle: Math.PI}, 
    path = d3.svg.arc();
	d3.select("body").append("svg")
        .attr({height: 200, width: 200})
    .append("g")
    .selectAll("path").data([spec,spec])
    .enter().append("path")
    .attr({d: path})
    .attr({
        transform: function(d,i){
                return "translate(" + [100*i+10,100] + ")"
            }
        })
	.style({fill: "green"})
	.filter(function(d,i){return i})
	.transition().duration(5000)
    .style({stroke: "blue", fill: "red"})