sfentress/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 = 12;

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>
	<!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 = 12;

	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>