Draggable clip path

<html>
<head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js"></script>
</head>
<body>
  <div id="chart">
  </div>
  <script type="text/javascript">
  var w = 800,
      h = 600,
      margin = 25;
    
var drag = d3.behavior.drag()
    .on("drag", function() {
        var clippy = d3.select('#clip circle');
        clippy.attr('cx', +clippy.attr('cx') + d3.event.dx);
        clippy.attr('cy', +clippy.attr('cy') + d3.event.dy);
    });

var svg = d3.select("#chart")
    .append("svg:svg")
      .attr("width", w + 2*margin)
      .attr("height", h + 2*margin)
    .append('g')
      .attr('transform', 'translate('+margin+','+margin+')');

var clip = svg.append("svg:clipPath")
      .attr("id", "clip")
    .append("svg:circle")
      .attr('cx', w/2)
      .attr('cy', h/2)
      .attr('r', 30);

svg.append('svg:rect')
      .attr('width', w)
      .attr('height', h)
      .attr('rx', 15)
      .attr('ry', 15)
      .attr("clip-path", function(d,i) { return "url(#clip)"; })
      .style("fill", d3.rgb(230, 230, 230))
      .style("stroke", d3.rgb(150, 150, 150))
      .call(drag);
    
  </script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.min.js to a secure url

https://mbostock.github.com/d3/d3.min.js