JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

CSS

path {
  cursor: pointer;
  fill: #00338D;
  stroke: #000;
  stroke-width: 1;
}

JavaScript

var width = 960,
    height = 500;
var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var arc = d3.svg.arc()
    .innerRadius(height / 4)
    .outerRadius(height / 3)
    .startAngle(0)
    .endAngle(Math.PI);
    
var path = svg.append("path")
    .attr("d", arc);
    
setTimeout(function () {
	arc.endAngle(Math.PI*2);
  path.attr('d', arc);
}, 3000)