JSFiddle - React, Tailwind, and code Playground

by kpandey017

HTML

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; text-align: center; }
  </style>
</head>

<body>
  <script>
    var data = [
      {name: 'dogs', count: 10, percentage: 20, color: '#f8b70a'},
    ];
    var totalCount = 112;		//calcuting total manually
    
    var width = 540,
    height = 540,
    radius = 200;

		var arc = d3.arc()
    	.outerRadius(radius - 10)
    	.innerRadius(180);

		var pie = d3.pie()
	    .sort(null)
	    .value(function(d) {
	        return d.count;
	    });

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

    var g = svg.selectAll(".arc")
      .data(pie(data))
      .enter().append("g").attr('class', 'progress-meter');

   	g.append("path")
    	.attr("d", arc)
      .style("fill", function(d,i) {
      	return d.data.color;
      });

    g.append("text")
    	.attr("transform", function(d) {
        var _d = arc.centroid(d);
        _d[0] *= 1.5;	//multiply by a constant factor
        _d[1] *= 1.5;	//multiply by a constant factor
        return "translate(" + _d + ")";
      })
      .attr("dy", ".50em")
      .style("text-anchor", "middle")
      .text(function(d) {
        if(d.data.percentage < 8) {
          return '';
        }
        return d.data.percentage + '%';
      });
        
    
	   
   g.append("foreignObject")
  .attr("x", -55)
  .attr("y", -55)
  .attr("width", 100)
  .attr("height", 100)
  .html(function(d) {
    return '<div ><img src="https://cdn1.iconfinder.com/data/icons/free-98-icons/32/call-512.png" alt="Trulli" width="35" height="35"/></div>'
  })
  
  g.append("text")
	   .attr("text-anchor", "middle")
		 .attr('font-size', '2em')
		 .attr('y', 20)
	   .text("08");
  g.append("text")
	   .attr("text-anchor", "middle")
		...