title: Draw a D3 circle with gradient colours
body: <p>How to draw a circle with gradient color? Say, a gradient from yellow to blue.</p>
  
  <p>Normally, to create a circle in yellow we can use the following code:</p>
  
  <pre><code>var cdata=[50,40];
  var xscale=40;
  var xspace =50;
  var yscale=70;
  
  var svg = d3.select("body")
      .append("svg")
      .attr("width", 1600)
      .attr("height", 1600);
  
  var circle = svg.selectAll("circle")
      .data(cdata)
     .enter()
      .append("circle");
  
  var circleattr = circle
      .attr("cx", function(d) {
          xscale = xscale+xspace;
          return xscale;
      })
      .attr("cy", function(d) {
          yscale=yscale+xspace+10;
          return yscale;
      })
      .attr("r", function(d) {
          return d;
      })
      .style("fill","yellow");
  </code></pre>