JSFiddle - React, Tailwind, and code Playground

by Simon060694

HTML

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

CSS

.my-div{
  
  position: absolute;
    top: 40%;
    left: 35%;
}
.my-p{
  font-family: 'Open Sans', sans-serif;
      font-size: 8px;
    width: 100%;
    font-weight: 100;
     animation: pulse 5s ;
      
}
 .my-p1{
  font-family: 'Open Sans', sans-serif;
      font-size: 10px;
    width: 100%;
    font-weight: 100;
     animation: pulse 2s ;
      
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

JavaScript

function ter(callback, t) {
    setTimeout(callback, t)
};
var backColor = '#fff',
fillColor ="#93c7f5",
vis = d3.select("body").append("svg").style('background',backColor),
 pi = Math.PI,
 _w = 600,
 _h = 600;
 
 vis.attr("width", _w).attr("height", _h) ;
 
 function drawOuterArc(radius,startAngle,endAngle,stepArcWidth){
   var endWidth=0,
   strTim = 50,
   item =0,
   foreground =vis
        .append("path")
        .attr("fill", fillColor)
        .attr("transform", "translate("+_w/2+","+_h/2+")");

        ter(function animateCircleWidth(){
             var arc = d3.svg.arc()
                    .innerRadius(radius)
                    .outerRadius(radius+endWidth)
                    .startAngle(startAngle)
                    .endAngle(endAngle);

                    foreground.attr("d", arc);
                    endWidth+=stepArcWidth;
                    if(item++<10){
                     ter(animateCircleWidth,strTim+=50.5);
                    }
        },strTim)

 }
 
 function drawConnectCircles(arg,timS){
  ter(function(){
   var  circle =vis.append("circle")
        .attr("cx", arg.x)
        .attr("cy", arg.y)
        .attr("r", arg.rads)
        .attr("fill", backColor)
        .attr("stroke", fillColor)
         .attr("stroke-width", 1);
         if(arg.an){ 
            ter(function(){
              circle.style("display", "none");
                  ter(function(){
                    circle.style("display", "")
                  }, 200);
            }, 200);
         }
      }, timS);   
 }


 
function drawOuterArcs(){
   for(var iAcr = 0, countC=8; iAcr < countC ; iAcr++){
     var radius =40 +(iAcr*(iAcr<2?1:iAcr-2)*5),
     startAngle = iAcr >=countC-2?(-150*pi/180):0,
     endAngle = iAcr >=countC-2?(150*pi/180):2*pi,
     stepArcWidth = iAcr ==countC-1||iAcr ==1?0.1:0.03;
     drawOuterArc(radius,startAngle,endAngle,stepArcWidth)
  }
}
function drawConnectsCircles(noAnimate){
var arr1 = infoData[0],
arr2 = infoData[1];

  for(var itk =0,...