animated radar plot

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    #radar{fill:#154577;fill-opacity:0.5;stroke:#154577;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}
    .axis text{fill:#dedede}
    .axis line,path{stroke:#dedede}
    text{font-family:Avenir;font-size:13.6px}
    circle,.grid{fill:none;stroke-width:1px;stroke:#dedede}
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    
    
    
    var w=400;
    var h=400;
    var radius=150;
    var radarData = [
      {name:"North Korea",before:8,after:60},
      {name:"Japan",before:85,after:40},
      {name:"U.S.",before:90,after:65},
      {name:"China",before:30,after:65}
      ];
    var aniSpeed=1000;
    var aniIndex=0;
    
    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h)

//create circle
    svg.append("circle")
    	.attr("cx",w/2)
    	.attr("cy",w/2)
    	.attr("r",radius)
    /*
    //create central grid - temporary layout
    //horizontal line
    svg.append("line")
    	.attr("class","grid")
    	.attr("x1",(w/2)-radius)
    	.attr("x2",(w/2)+radius)
    	.attr("y1",(h/2))
    	.attr("y2",(h/2))
    //vertical line
    svg.append("line")
    	.attr("class","grid")
    	.attr("x1",(w/2))
    	.attr("x2",(w/2))
    	.attr("y1",(h/2)-radius)
    	.attr("y2",(h/2)+radius)
      */
    
    //label the quadrants
    svg.append("g").attr("id","labels")
    	.selectAll("text")
    	.data(radarData)
    	.enter()
    	.append("text")
    	.attr("x",function(d,i){
      	switch(i) {
            case 0:
                return w/2;
                break;
            case 1:
                return (w/2)+radius+8;
                break;
            case 2:
                return w/2;
                break;
          	case 3:
            		return (w/2)-radius-8;
            		break;
        	}
    	})
    	.attr("y",function(d,i){
      	switch(i) {
            case 0:
                return (h/2)-radius-8;
                break;
            case 1:
                return h/2+4;
                break;
            case 2:
                return (h/2)+radius+18;
                break;
          	case 3:
            		return (h/2)+4;
            		break;
        	}
    	})
    	.attr("text-anchor",function(d,i){
      	switch(i) {
            case 0:
                return "middle";
                break;
            case 1:
                return "start";
                break;
            case 2:
                return "middle";
                break;
          	case 3:
            		return "end";
            		break;
        	}
    	})
    	.text(function(d){
      	return d.name;
    	})
    
    	//set up scales on each quadrant axis
    	var scaleN=d3.scaleLinear()
      	.domain([0,100])
      	.range([h/2,(h/2)-radius]);
    	var scaleS=d3.scaleLinear()
      	.domain([0,100])
      	.range([h/2,(h/2)+radius]);
    	var scaleE=d3.scaleLinear()
      	.domain([0,100])
      	.range([w/2,(w/2)+radius]);
    	var scaleW=d3.scaleLinear()
      	.domain([0,100])
      	.range([w/2,(w/2)-radius]);
    
    //define some axes
    var axisN = d3.axisRight()
    		.scale(scaleN)
    		//ticks(5)
    		.tickValues([50,100])
    svg.append("g")
    	.attr("transform","translate("+w/2+",0)")
    	.attr("class","axis")
    	.call(axisN)
    
    var axisS = d3.axisLeft()
    		.scale(scaleS)
    		.tickValues([50,100])
    svg.append("g")
    	.attr("transform","translate("+w/2+",0)")
    	.attr("class","axis")
    	.call(axisS)
    
    var axisE = d3.axisBottom()
    		.scale(scaleE)
    		.tickValues([50,100])
    svg.append("g")
    	.attr("transform","translate(0,"+h/2+")")
    	.attr("class","axis")
    	.call(axisE)
    
    var axisW = d3.axisTop()
    		.scale(scaleW)
    		.tickValues([50,100])
    svg.append("g")
    	.attr("transform","translate(0,"+h/2+")")
    	.attr("class","axis")
    	.call(axisW)
    
    
    	//practice putting a circle anywhere on an axis
    /*
    svg.append("circle")
    	.attr("cx",w/2)
    	.attr("cy",scaleN(63))
    	.attr("r",5)
      */
    
    	//draw intial path
    	var plot = svg.append("path")
      	.attr("id","radar")
      	.attr("d",function(){
        	var x1=scaleE(0);
          var y1=scaleN(radarData[0].before);
      
          var x2=scaleE(radarData[1].before);
          var y2=scaleN(0)
          
          var x3=scaleE(0);
          var y3=scaleS(radarData[2].before);
          
          var x4=scaleW(radarData[3].before);
          var y4=scaleN(0)
           
          return "M"+x1+","+y1+" L"+x2+","+y2+" "+x3+","+y3+" "+x4+","+y4+"z"
          
        })
      
      setInterval(function(){
      
        if (aniIndex==0){
          	aniIndex=1;
        }	else	{
          	aniIndex=0;
        }
 plot.transition().duration(aniSpeed).ease(d3.easeElastic).attr("d",function(d){
          
          var y1,x2,y3,x4;
          if (aniIndex==1){
                y1=scaleN(radarData[0].after);
            		x2=scaleE(radarData[1].after);
            		y3=scaleS(radarData[2].after);
            		x4=scaleW(radarData[3].after);
            
          	}	else	{
              	y1=scaleN(radarData[0].before);
            		x2=scaleE(radarData[1].before);
            		y3=scaleS(radarData[2].before);
            		x4=scaleW(radarData[3].before);	
            }
          var x1=scaleE(0);
          var y2=scaleN(0)
          var x3=scaleE(0);
          var y4=scaleN(0)
          return "M"+x1+","+y1+" L"+x2+","+y2+" "+x3+","+y3+" "+x4+","+y4+"z"
        })  
      }, aniSpeed);

</script>
</body>

https://d3js.org/d3.v4.min.js