Taylor Diagram

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500
    
var pi = Math.PI;
var data ;    
var vis = d3.select("body").append("svg")

var ir = 69
var or = 70
var count = 0;

/*      
  A Must Read
  http://math.rice.edu/~pcmi/sphere/drg_txt.html
  Radian: the angle made when we take the radius and wrap it round the circle.
    
  In a half circle there are π radians, which is also 180°
  So:	 	π radians	=	180°
  1 radian	=	180°/π    

    quadrants go clockwise: 
        12 o'clock to 3 is quadrant 1
        3 o'clock to 6 is quadrant 2
        6 o'clock to 9 is quadrant 3
        9 o'clock to 12 is quadrant 4


        */        

var arc = d3.svg.arc()
    //the closer inner and outer values the thinner the thickness of the arc
    .innerRadius(ir)            
    .outerRadius(70)
    .startAngle(pi/-2)  //quadrant 4 start 9 o'clock
    .endAngle(pi/2)     //quadrant 1 end 3 o'clock

var arc2 = d3.svg.arc()
    //the closer inner and outer values the thinner the thickness of the arc
    .innerRadius(ir)            
    .outerRadius(70)
    .startAngle(pi/-2)  //quadrant 4 start 9 o'clock
    .endAngle(pi/2)     //quadrant 1 end 3 o'clock

var arc3 = d3.svg.arc()
    //the closer inner and outer values the thinner the thickness of the arc
    .innerRadius(399)            
    .outerRadius(400)
    .startAngle(pi/-2)  //quadrant 4 start 9 o'clock
    .endAngle(pi/2)     //quadrant 1 end 3 o'clock

vis.attr("width", "900").attr("height", "400") // Added height and width so arc is visible
    .append("path")
    .attr("d", arc)
    .attr("fill", "blue")
  .attr("transform", "translate(" + 300 + "," + height / 1 + ")") 

vis.attr("width", "900").attr("height", "500") // Added height and width so arc is visible
    .append("path")
    .attr("d", arc2)
    .attr("fill", "red")
  .attr("transform", "translate(" + 150 + "," + height / 1 + ")") 

vis.attr("width", "900").attr("height", "500") // Added height and width so arc is visible
    .append("path")
    .attr("d", arc3)
    .attr("fill", "black")
  .attr("transform", "translate(" + -10 + "," + height / 1 + ")") 



</script>

// Code goes here

/* Styles go here */