D3 Examples - Check gradient in circule

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
  <head>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  </head>
​
  <body>
    <script>
    
      // sample data
      var data = ['yellow', 'green', 'red'];
    
      var height = 500,
          width = 500,
          radius = 200,
          padding = 0.01;
      
      var svg = d3.select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform', 'translate(' + width/2 + ',' + width/2 + ')');
        
      var arc = d3.svg.arc()
        .innerRadius(radius - 100)
        .outerRadius(radius);
      
      // pie the data
      var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) { return d; });
      data = pie(data);
​
      // create our gradient
      var colors = [],
          slice = 0,
          inPad = false;
      // 360 degrees
      
      d3.range(360).forEach(function(d, i) {
        // convert to radians
​
        
                        var start = i * (Math.PI / 180),
            end = (i + 1) * (Math.PI / 180);
        
          var tempColor = d3.hsl(i, 1, .5).toString();
        
debugger
          colors.push({
            startAngle: start,
            endAngle: end,
            fill: tempColor
          });
      });
      // add arcs
      svg.selectAll('.arc')
        .data(colors)
        .enter()
        .append('path')
        .attr('class', 'arc')
        .attr('d', arc)
        .style('fill', function(d){
          return d.fill;
        })
        .style('stroke',function(d){
          return d.fill;
        });
    </script>
  </body>
​
</html>
    