rheyns/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Mouse Over Text Example</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
</head>
<body>

<script language="javascript">
var data = [
      {name:'bob',  location: "Texas"},
      {name:'jane', location: "Ohio"},
      {name:'sue',  location: "Colorado"},
      {name: 'tom', location: "Florida"}
];

var svg = d3.select("body")
		.append("svg:svg")
		.attr("viewBox", "-512 -370 1024 768")
		.attr("preserveAspectRatio", "xMinYMin meet");

	svg.style("opacity", 1e-6)
		.transition()
		.duration(800)
		.style("opacity", 1);

var force = d3.layout.force().nodes(data);
startForce();
function startForce(){
	force
		.links([])
		.gravity(0.035)
		.charge(-200)
		.start();
}

var g = svg.selectAll("group")
		.data(data)
		.enter().append("svg:g")
		.attr("class", "data")
		.call(force.drag)
		.on("mouseover", function(d, i){svg.select("circles").style("stroke-width", 1).style("stroke", "red");});

var circles = g.append("svg:circle")
		.attr("r", 30)
		.style("fill", "green")
		.attr("fill-opacity", .3)
		.style("stroke", "grey")
		.style("stroke-width", 0.000001)
		.on("mouseover", function(){d3.select(this).style("stroke-width", 1).style("stroke", "red");})
		.on("mouseout", function(){d3.select(this).style("stroke-width", 0.000001)})

var text = g.append("svg:text")
      	.attr("class", "nodeText")
    	.attr("text-anchor", "middle")
	.text(function(d) {return d.name;})
	.attr("pointer-events", "none");

force.on("tick", function(e) {
	var k = 0 * e.alpha;
	data.forEach(function(o, i) {
    	o.x += i & 0 ? k : -k;
    	o.y += i & 0 ? k : -k;
	});

	circles.attr("cx", function(d) {return d.x;});
	circles.attr("cy", function(d) {return d.y;});
	text.attr("dx", function(d) {return d.x;});
	text.attr("dy", function(d) {return d.y;});

});

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	<title>Mouse Over Text Example</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
	</head>
	<body>

	<script language="javascript">
	var data = [
	{name:'bob', location: "Texas"},
	{name:'jane', location: "Ohio"},
	{name:'sue', location: "Colorado"},
	{name: 'tom', location: "Florida"}
	];

	var svg = d3.select("body")
	.append("svg:svg")
	.attr("viewBox", "-512 -370 1024 768")
	.attr("preserveAspectRatio", "xMinYMin meet");

	svg.style("opacity", 1e-6)
	.transition()
	.duration(800)
	.style("opacity", 1);

	var force = d3.layout.force().nodes(data);
	startForce();
	function startForce(){
	force
	.links([])
	.gravity(0.035)
	.charge(-200)
	.start();
	}

	var g = svg.selectAll("group")
	.data(data)
	.enter().append("svg:g")
	.attr("class", "data")
	.call(force.drag)
	.on("mouseover", function(d, i){svg.select("circles").style("stroke-width", 1).style("stroke", "red");});

	var circles = g.append("svg:circle")
	.attr("r", 30)
	.style("fill", "green")
	.attr("fill-opacity", .3)
	.style("stroke", "grey")
	.style("stroke-width", 0.000001)
	.on("mouseover", function(){d3.select(this).style("stroke-width", 1).style("stroke", "red");})
	.on("mouseout", function(){d3.select(this).style("stroke-width", 0.000001)})

	var text = g.append("svg:text")
	.attr("class", "nodeText")
	.attr("text-anchor", "middle")
	.text(function(d) {return d.name;})
	.attr("pointer-events", "none");

	force.on("tick", function(e) {
	var k = 0 * e.alpha;
	data.forEach(function(o, i) {
	o.x += i & 0 ? k : -k;
	o.y += i & 0 ? k : -k;
	});

	circles.attr("cx", function(d) {return d.x;});
	circles.attr("cy", function(d) {return d.y;});
	text.attr("dx", function(d) {return d.x;});
	text.attr("dy", function(d) {return d.y;});

	});

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