punkish · January 19, 2012 04:19
diff --git a/index.html b/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>