D3 Examples - Radar plot

xxxxxxxxxx
 
<!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>
    