Skip to content

Instantly share code, notes, and snippets.

@geotheory

geotheory/index.html

Created March 26, 2013 16:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save geotheory/5246723 to your computer and use it in GitHub Desktop.
Save geotheory/5246723 to your computer and use it in GitHub Desktop.
Download ZIP
Circles and text
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment