jtibbutt/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<style>

div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 12px;
padding: 8px;
font: 10px sans-serif;
background: #ddd;
border: solid 1px #aaa;
border-radius: 8px;
pointer-events: none;
}

</style>
</head>
<body>
<div id="sec1"></div>
<div id="sec2"></div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>


var w = 500;
var h = 200;
var padding = 0;
var margin = {top:padding, right:padding, bottom: padding, left: padding};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;

// The svg containers
var svg = d3.select("#sec1").append("svg")
.attr("width", width + margin.top)
.attr("height",height + margin.left);

var svg2 = d3.select("#sec2").append("svg")
.attr("width", width + margin.top)
.attr("height",height + margin.left);

// draw a rectangle
var rect1 = svg.append("rect")
.attr("opacity", 0.4)
.attr("width", width)
.attr("height", height)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);

var rect2 = svg2.append("rect")
.attr("opacity", 0.2)
.attr("width", width)
.attr("height", height)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);

var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);

function mouseover() {
div.transition()
.duration(200)
.style("opacity", 1);
}

function mousemove() {
div
.text(d3.mouse(this))
}

function mouseout(){
 div.style("opacity", 1e-6);

}


</script>
	<!DOCTYPE html>
	<html>
	<head>
	<style>

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 60px;
	height: 12px;
	padding: 8px;
	font: 10px sans-serif;
	background: #ddd;
	border: solid 1px #aaa;
	border-radius: 8px;
	pointer-events: none;
	}

	</style>
	</head>
	<body>
	<div id="sec1"></div>
	<div id="sec2"></div>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>


	var w = 500;
	var h = 200;
	var padding = 0;
	var margin = {top:padding, right:padding, bottom: padding, left: padding};
	var width = w - margin.left - margin.right;
	var height = h - margin.top - margin.bottom;

	// The svg containers
	var svg = d3.select("#sec1").append("svg")
	.attr("width", width + margin.top)
	.attr("height",height + margin.left);

	var svg2 = d3.select("#sec2").append("svg")
	.attr("width", width + margin.top)
	.attr("height",height + margin.left);

	// draw a rectangle
	var rect1 = svg.append("rect")
	.attr("opacity", 0.4)
	.attr("width", width)
	.attr("height", height)
	.on("mouseover", mouseover)
	.on("mousemove", mousemove)
	.on("mouseout", mouseout);

	var rect2 = svg2.append("rect")
	.attr("opacity", 0.2)
	.attr("width", width)
	.attr("height", height)
	.on("mouseover", mouseover)
	.on("mousemove", mousemove)
	.on("mouseout", mouseout);

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 1e-6);

	function mouseover() {
	div.transition()
	.duration(200)
	.style("opacity", 1);
	}

	function mousemove() {
	div
	.text(d3.mouse(this))
	}

	function mouseout(){
	div.style("opacity", 1e-6);

	}


	</script>