clipping path notes

gistfile1.txt

Here is the final product: 
http://www.mappinghealth.com/flu#sim 


The code is complex because I am doing other things such as "zooming 
out" while the circle is growing. But here is the clip definition. one 
thing that I found counter-intuitive is that the clipping shape is 
actually a window that allows the background to show through, rather 
than a shape that obstructs others. 

outer_vis.append("svg:clipPath") 
    .attr("id", "clip-window") 
    .append("svg:circle") 
    .attr("id", "clip-circle") 
    .attr("r", clip_circle_radius) 
    ; 



vis = outer_vis.append("svg:g") 
    .attr("clip-path", "url(#clip-window)") 
    .attr("transform", "translate(" + r + "," + r + ")") 
    ; 


and then to grow the circle: 

outer_vis.select("#clip- 
circle").transition().duration(frame*2).attr("r", clip_circle_radius);