Radar

<!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; }
    circle{fill:none;stroke:#154577;stroke-width:3px}
    .bg{fill:#fff1e0}
    .crosshair{fill:none;stroke:#154577;stroke-width:1px}
    .axis{opacity:0.3}
  </style>
</head>

var w = 580;
    var h = 580;
    var radius = 200;
    var tickValues = [25,50,75];
     
    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h)
    
    svg.append("rect")
    	.attr("width",w)
    	.attr("height",h)
    	.attr("class","bg")

svg.append("circle")
    	.attr("cx",w/2)
    	.attr("cy",h/2)
    	.attr("r",radius)
    
    //horizontal line
    svg.append("line")
    	.attr("class","crosshair")
    	.attr("x1",(w/2)-radius)
      .attr("y1",h/2)
    	.attr("x2",(w/2)+radius)
      .attr("y2",h/2)
    
    //vertical line
    svg.append("line")
    	.attr("class","crosshair")
    	.attr("x1",w/2)
      .attr("y1",(h/2)-radius)
    	.attr("x2",w/2)
      .attr("y2",(h/2)+radius)
    
    
    //STEP 1 -  DEFINE THE SCALES
    //N Korea
    var scaleN = d3.scaleLinear()
    	.domain([0,100])
    	.range([h/2,(h/2)-radius]);
    //domain = data values (min max)
    //range = pixel outputs (for min and max)
    
    //US
    var scaleS = d3.scaleLinear()
    	.domain([0,100])
    	.range([h/2,(h/2)+radius]);
    
    //China
    var scaleW = d3.scaleLinear()
    	.domain([0,100])
    	.range([w/2,(w/2)-radius]);
    
    //Japan
    var scaleE = d3.scaleLinear()
    	.domain([0,100])
    	.range([w/2,(w/2)+radius]);

//STEP 2 - DEFINE THE AXES
    var axisN = d3.axisLeft()
    	.scale(scaleN)
    	.tickValues(tickValues)
    
    var axisS = d3.axisRight()
    	.scale(scaleS)
    	.tickValues(tickValues)
    
    var axisE = d3.axisBottom()
    	.scale(scaleE)
    	.tickValues(tickValues)
    
    var axisW = d3.axisTop()
    	.scale(scaleW)
    	.tickValues(tickValues)
    
    
    //STEP 3 - APPEND THE AXES TO THE SVG
    svg.append("g")
    	.attr("class","axis")
    	.attr("transform","translate(0,"+h/2+")")
    	.call(axisE)
    
    svg.append("g")
    	.attr("class","axis")
    	.attr("transform","translate(0,"+h/2+")")
    	.call(axisW)
    
    svg.append("g")
    	.attr("class","axis")
    	.attr("transform","translate("+w/2+",0)")
    	.call(axisS)
    
    svg.append("g")
    	.attr("class","axis")
    	.attr("transform","translate("+w/2+",0)")
    	.call(axisN)
    
    //draw the data last so it appears on top
    svg.append("circle")
    	.attr("cx",scaleE(50))
    	.attr("r",5)
    	.attr("cy",h/2)

</script>
</body>

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