index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">

svg {
  border: solid 1px #aaa;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">


var width = 960,
    height = 500,
    radius = 120;

var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("dragstart", dragstart)
    .on("drag", dragmove)
    .on("dragend", dragend);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

var circle = svg.selectAll("circle")
    .data([1 / 3])
  .enter().append("circle")
    .datum(function(d) { return {x: width * d, y: height / 2}; })
    .attr("r", radius)
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .call(drag);

function dragstart() {
  d3.select(this).style("fill", "red");
}

function dragmove(d) {
  d3.select(this)
      .attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
      .attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
}

function dragend() {
  d3.select(this).style("fill", null);
}

    </script>
  </body>
</html>