D3JS Circle on top of each other

Question

I want to make my circle stack on top of each other, so that the smaller circle is actually visible, something like this.

What I have now, even though the smaller circle is the first item to be appended, it seems like it is overshadowed by the other bigger circles.

Here is my code on code pen.

// http://codepen.io/christiansakai/pen/RPOJyQ

var data = [10, 30, 50];
var w = 400, h = 300;
var svg = d3.select('.chart')
            .append('svg')
            .attr('width', w)
            .attr('height', h)
            .style({
              border: '1px solid black'
            });

svg.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .attr({
     cx: 200,
     cy: function(d) {
       return d + (d / 2);
     },
     r: function(d) {
       return d;
     },
     fill: function(d) {
       return d3.rgb(1, 2 * d, 100)
     }
   });