D3 Examples - radar

xxxxxxxxxx
 
<!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; }
    
    .bg{fill:#fff1e0}
    circle{fill:none;stroke:#154577;stroke-width:3px;}
    .crosshair{fill:none;stroke:#154577;stroke-width:1px;}
    .axis{opacity:.2;
    }
    
  </style>
</head>
​
<body>
  <script>
    
    var w = 580
  var h = 580
  var radius = 180  
  
  var tickValues =[25,50,75]
​
  //keep below line in boilerplate
  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)
  
  //vert 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)  
  
  //N KOREA
  var scaleN = d3.scaleLinear()
  .domain([0,100])
  .range([h/2,(h/2)-radius]);
  //domain: data values (min/max)
  //range: pixel output
    
    svg.append("circle")
        .attr("cx",w/2)
        .attr("r",5)
        .attr("cy",scaleN(60))
    
    
  //UNITED STATES  
  var scaleS = d3.scaleLinear()
  .domain([0,100])
  .range([h/2,(h/2)+radius]);
  
  svg.append("circle")
        .attr("cx",w/2)
        .attr("r",5)
        .attr("cy",scaleS(70))
    
    
  //JAPAN  
  var scaleE = d3.scaleLinear()
  .domain([0,100])
  .range([h/2,(h/2)+radius]);
    
    svg.append("circle")
        .attr("cy",w/2)
        .attr("r",5)
        .attr("cx",scaleE(33))
    
    
  //CHINA  
  var scaleW = d3.scaleLinear()
  .domain([0,100])
  .range([h/2,(h/2)-radius]);
    
    svg.append("circle")
        .attr("cy",w/2)
        .attr("r",5)
        .attr("cx",scaleW(55))
    
    var axisN = d3.axisLeft()
    .scale(scaleN)
    .tickValues(tickValues)
    
    svg.append("g")
    .attr("class","axis")
    .attr("transform","translate("+w/2+",0)")
    .call(axisN)
     
    var axisS = d3.axisLeft()
    .scale(scaleS)
    .tickValues(tickValues)
    
    svg.append("g")
    .attr("class","axis")
    .attr("transform","translate("+w/2+",0)")
    .call(axisS)
    
    var axisE = d3.axisBottom()
    .scale(scaleE)
    .tickValues(tickValues)
        
    svg.append("g")
    .attr("class","axis")
    .attr("transform","translate(0,"+h/2+")")
    .call(axisE)
   
    var axisW = d3.axisTop()
    .scale(scaleW)
    .tickValues(tickValues)
    
    svg.append("g")
    .attr("class","axis")
    .attr("transform","translate(0,"+h/2+")")
    .call(axisW)
​
  </script>
</body>
​
    