Radar plot

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
		text {font-family:Avenir-Light;font-size:14px};
		body {margin:0; position:fixed; top:0; right:0; bottom:0;}
    .bg {fill:#dcdcdc}
    circle {fill:none; stroke:#154577; stroke-width:3px}
    .crosshair {fill:none; stroke:#154577; stroke-width:1px}
    
    .axis {opacity:0.5}
	</style>
</head>

<body>
<script>
//global variables
  
var w=580;
var h=580;
var radius=198;
var tickValues=[20,40,60,80];
  
var svg = d3.select("body").append("svg")
         .attr("width",900)
         .attr("height",500)

svg.append("rect")
.attr("width",w)
 .attr("height",h)
.attr("class","bg")

d3.select("svg").append("circle")
    .attr("cx",w/2)
    .attr("cy",h/2)
    .attr("r",radius)

//horizontal
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)

//North 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)
  
    svg.append("circle")
  	.attr("cx",w/2)
  	.attr("r",5)
  	.attr("cy",scaleN(60))
    .attr("tickValues",tickValues)
  
//US
var scaleS = d3.scaleLinear()
	.domain([0,100])
	.range([h/2,(h/2)+radius]);
  
  console.log(scaleN(70));
  
  svg.append("circle")
  	.attr("cx",w/2)
  	.attr("r",5)
  	.attr("cy",scaleS(90))

//China
var scaleW = d3.scaleLinear()
	.domain([0,100])
	.range([h/2,(h/2)-radius]);
  
  console.log(scaleW(55));
  
  svg.append("circle")
  	.attr("cx",scaleW(70))
  	.attr("r",5)
  	.attr("cy",w/2)

//Japan
var scaleE = d3.scaleLinear()
	.domain([0,100])
	.range([h/2,(h/2)+radius]);
  
  svg.append("circle")
  	.attr("cx",scaleE(33))
  	.attr("r",5)
  	.attr("cy",w/2)

//North scale
  var axisN=d3.axisLeft()
  	.scale(scaleN)
  	.tickValues(tickValues)
  	
  svg.append("g")
  .attr("class","axis")
  .attr("transform","translate("+w/2+",0)")
	.call(axisN)
  
  
//South axis
  var axisS=d3.axisRight()
  	.scale(scaleS)
  	.tickValues(tickValues)
  	
  svg.append("g")
  .attr("class","axis")
  .attr("transform","translate("+w/2+",0)")
	.call(axisS)
  
  
//West axis
  var axisW=d3.axisBottom()
  	.scale(scaleW)
  	.tickValues(tickValues)
  	
  svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(0,"+h/2+")")
	.call(axisW)
 
  
//East axis
  var axisE=d3.axisTop()
  	.scale(scaleE)
  	.tickValues(tickValues)
  	
  svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(0,"+h/2+")")
	.call(axisE)
  
//pure d3: transform="translate(100,0)"

//define scale
//define axis
//append axis

//create new group and append rects to it

//geometry adn style the rects

//create some labels for the bars

//position labels and write text

</script>

</body>
</html>

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