punkish/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
    <script type="text/javascript" src="http://mumbai.geology.wisc.edu/lib/OpenLayers-2.11/OpenLayers.js"></script>
    <script type="text/javascript" src="http://mumbai.geology.wisc.edu/lib/d3/d3.js"></script>
    <script type="text/javascript" src="http://mumbai.geology.wisc.edu/lib/jquery/jquery-1.7.1.min.js"></script>
<style type="text/css">
#map, #viz {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 400px;
}
#map {
z-index: -1;
}
#viz {
z-index: 1;
}
</style>
</head>
<body>
<div id="main">
    <div id="map" style="border: 1px solid black;"></div>
    <div id="viz" style="border: 1px solid black;"></div>
    <div id="coords"></div>
</div>

    <script type="text/javascript">
    var m = {width: 800, height: 400}, grid = {width: 40, height: 40};
	grid.cols = m.width / grid.width, grid.rows = m.height / grid.height;

    var map = new OpenLayers.Map("map");

    map.addLayer(new OpenLayers.Layer.Google(
        "Google Physical",
        {type: google.maps.MapTypeId.TERRAIN}
    ));

    map.setCenter(new OpenLayers.LonLat(0, 0).transform(
        new OpenLayers.Projection("EPSG:4326"),
        new OpenLayers.Projection("EPSG:900913")
    ), 5);

    var data = [];
    for (var r = 0; r < grid.rows; r++) {
        for (var c = 0; c < grid.cols; c++) {
            data.push([c, r]);
        }
    }

    var sampleSVG = d3.select("#viz")
        .append("svg:svg")
        .attr("width", m.width)
        .attr("height", m.height);

    sampleSVG.selectAll("rect")
        .data(data)
        .enter()
        .append("svg:rect")
        .style("stroke", "gray")
        .style("fill", "none")
        .attr("x", function(i) { return i[0] * grid.width; })
        .attr("y", function(i) { return i[1] * grid.height; })
        .attr("height", grid.height)
        .attr("width", grid.width)
        .attr("pointer-events", "all")
        .on("mouseover", function() {d3.select(this).style("fill", "yellow");})
        .on("mouseout", function() {d3.select(this).style("fill", "none");})
        .on("click", function(i) { $("#coords").empty().html( i[1] + " row x " + i[0] + " col")});
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
	<script type="text/javascript" src="http://mumbai.geology.wisc.edu/lib/OpenLayers-2.11/OpenLayers.js"></script>
	<script type="text/javascript" src="http://mumbai.geology.wisc.edu/lib/d3/d3.js"></script>
	<script type="text/javascript" src="http://mumbai.geology.wisc.edu/lib/jquery/jquery-1.7.1.min.js"></script>
	<style type="text/css">
	#map, #viz {
	position: absolute;
	top: 0;
	left: 0;
	width: 800px;
	height: 400px;
	}
	#map {
	z-index: -1;
	}
	#viz {
	z-index: 1;
	}
	</style>
	</head>
	<body>
	<div id="main">
	<div id="map" style="border: 1px solid black;"></div>
	<div id="viz" style="border: 1px solid black;"></div>
	<div id="coords"></div>
	</div>

	<script type="text/javascript">
	var m = {width: 800, height: 400}, grid = {width: 40, height: 40};
	grid.cols = m.width / grid.width, grid.rows = m.height / grid.height;

	var map = new OpenLayers.Map("map");

	map.addLayer(new OpenLayers.Layer.Google(
	"Google Physical",
	{type: google.maps.MapTypeId.TERRAIN}
	));

	map.setCenter(new OpenLayers.LonLat(0, 0).transform(
	new OpenLayers.Projection("EPSG:4326"),
	new OpenLayers.Projection("EPSG:900913")
	), 5);

	var data = [];
	for (var r = 0; r < grid.rows; r++) {
	for (var c = 0; c < grid.cols; c++) {
	data.push([c, r]);
	}
	}

	var sampleSVG = d3.select("#viz")
	.append("svg:svg")
	.attr("width", m.width)
	.attr("height", m.height);

	sampleSVG.selectAll("rect")
	.data(data)
	.enter()
	.append("svg:rect")
	.style("stroke", "gray")
	.style("fill", "none")
	.attr("x", function(i) { return i[0] * grid.width; })
	.attr("y", function(i) { return i[1] * grid.height; })
	.attr("height", grid.height)
	.attr("width", grid.width)
	.attr("pointer-events", "all")
	.on("mouseover", function() {d3.select(this).style("fill", "yellow");})
	.on("mouseout", function() {d3.select(this).style("fill", "none");})
	.on("click", function(i) { $("#coords").empty().html( i[1] + " row x " + i[0] + " col")});
	</script>
	</body>
	</html>