Check gradient in circule

<!DOCTYPE html>
<html>

<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

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js