JSFiddle - React, Tailwind, and code Playground

by kalar su

CSS

path {
    stroke: #ffffff;
    stroke-width: 2px;
}

JavaScript

var data = [ {name: "one", value: 1976},
			{name: "two", value:  4357} ];

var margin = {top: 20, right: 20, bottom: 20, left: 20};
	width = 235 - margin.left - margin.right; //195 donut size
	height = width - margin.top - margin.bottom;

var chart = d3.select("body")
				.append('svg')
			    .attr("width", width + margin.left + margin.right)
			    .attr("height", height + margin.top + margin.bottom)
			   .append("g")
    			.attr("transform", "translate(" + ((width/2)+margin.left) + "," + ((height/2)+margin.top) + ")");


var radius = Math.min(width, height) / 2; 

var color = d3.scale.ordinal()
	.range(["#BFD4CE", "#2B705C"]);

var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius - 18); //border width

var pie = d3.layout.pie()
    .sort(null)
    .startAngle(2*Math.PI) //change the starting point
    .endAngle(4*Math.PI)  //change the ending point
    .value(function(d) { return d.value; });


var g = chart.selectAll(".arc")
  .data(pie(data))
.enter().append("g")
  .attr("class", "arc");

g.append("path")
  .style("fill", function(d) { return color(d.data.name); })
  .transition().delay(function(d, i) { return i * 300; }).duration(300) //drawing dely
  .attrTween('d', function(d) {
       var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
       return function(t) {
           d.endAngle = i(t);
         return arc(d);
       }
  });