D3 Examples - simple arc

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
​
  <style>
    g.tick text { visibility: hidden }
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    var width = 960, height = 500
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    .style("border", "solid")
    
    var dim = Math.min(width, height)
    
    var circleWidth = dim * 0.95 / 2;
    
    var barWidth = circleWidth / 4;
​
    var colourScale = d3.scaleSequential(d3.interpolateRdYlGn).domain([0.75,1]);
    var scale = d3.scaleLinear().domain([0,1]).range([0,(Math.PI * 2 * 0.75)]);
​
    var targetArc = d3.arc()
      .innerRadius(circleWidth - barWidth)
      .outerRadius(circleWidth)
      .startAngle(0)
      .endAngle(scale(1))
        .cornerRadius(barWidth/10);
    
        var value = 0.537705116655576
​
    var actualArc = d3.arc()
      .innerRadius(circleWidth- (barWidth *1.5))
      //.innerRadius(0)
      .outerRadius(circleWidth - (barWidth/2))
      .startAngle(0)
      .endAngle(scale(value))
      .cornerRadius(barWidth/10);
    
    var g = svg.append("g")
    .attr("transform", "translate(" + width/2 + ","+height/2+")");
    
    g.append("path")
    .attr("d", targetArc())
    .attr("fill", "grey")
    .attr("opacity", 0.3)
    
        g.append("path")
    .attr("d", actualArc())
    .attr("fill", colourScale(value))
  </script>
</body>
​
    