geotheory · March 26, 2013 16:15
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <meta charset="utf-8">
 <head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
 <body>
    <div id="viz"></div>
    <div id="status" style="position:fixed; bottom:0; left:0;
        color:white; background-color:darkgreen; font-size:small"></div>
    <script type="text/javascript">

    // functions for adding a 'status' box with link info
    function addStatus(targetURL){document.getElementById('status').innerHTML=targetURL;}
    function clearStatus(){document.getElementById('status').innerHTML=null;}

    var w = window.innerWidth;
    var h = window.innerHeight;

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

    var dataset =  [[100, h/4, "http://bbc.co.uk/", "home"],
                    [100, h/2, "http://bbc.co.uk/weather/", "weather"],
                    [100, 3*h/4, "http://bbc.co.uk/news/", "news"]];

    // Add circles and functionality
    var sel = sampleSVG.selectAll("g")
        .data(dataset)
        .enter()
        .append('g')
        .on("mouseover",
            function(d){
                d3.select(this).select('circle').style("stroke", 'black');
                d3.select(this).select('text').style('fill', 'black');
                addStatus(d[2]);
                })
        .on("mouseout",
            function(d){
                d3.select(this).select('circle').style("stroke", 'grey');
                d3.select(this).select('text').style('fill', 'grey');
                clearStatus();
                })
        .on("mouseup", function(d){window.location = d[2];});

    sel.append("text")
        .attr("text-anchor", "middle")
        .attr("x", function(d){return d[0]})
        .attr("y", function(d){return d[1]})
        .text(function(d) {return d[3];})
        .style("fill", "grey")
        .attr("dy", "0.35em");

    sel.append("circle")
        .style("fill", "transparent")
        .style("stroke", "grey")
        .style("stroke-width", 3)
        .attr("r", 50)
        .attr("cx", function(d){return d[0]})
        .attr("cy", function(d){return d[1]})

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

	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<body>
	<div id="viz"></div>
	<div id="status" style="position:fixed; bottom:0; left:0;
	color:white; background-color:darkgreen; font-size:small"></div>
	<script type="text/javascript">

	// functions for adding a 'status' box with link info
	function addStatus(targetURL){document.getElementById('status').innerHTML=targetURL;}
	function clearStatus(){document.getElementById('status').innerHTML=null;}

	var w = window.innerWidth;
	var h = window.innerHeight;

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

	var dataset = [[100, h/4, "http://bbc.co.uk/", "home"],
	[100, h/2, "http://bbc.co.uk/weather/", "weather"],
	[100, 3*h/4, "http://bbc.co.uk/news/", "news"]];

	// Add circles and functionality
	var sel = sampleSVG.selectAll("g")
	.data(dataset)
	.enter()
	.append('g')
	.on("mouseover",
	function(d){
	d3.select(this).select('circle').style("stroke", 'black');
	d3.select(this).select('text').style('fill', 'black');
	addStatus(d[2]);
	})
	.on("mouseout",
	function(d){
	d3.select(this).select('circle').style("stroke", 'grey');
	d3.select(this).select('text').style('fill', 'grey');
	clearStatus();
	})
	.on("mouseup", function(d){window.location = d[2];});

	sel.append("text")
	.attr("text-anchor", "middle")
	.attr("x", function(d){return d[0]})
	.attr("y", function(d){return d[1]})
	.text(function(d) {return d[3];})
	.style("fill", "grey")
	.attr("dy", "0.35em");

	sel.append("circle")
	.style("fill", "transparent")
	.style("stroke", "grey")
	.style("stroke-width", 3)
	.attr("r", 50)
	.attr("cx", function(d){return d[0]})
	.attr("cy", function(d){return d[1]})

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