Skip to content

Instantly share code, notes, and snippets.

@kbroman
Last active August 29, 2015 14:25
Show Gist options
  • Save kbroman/6d7697f0f084cb9b1372 to your computer and use it in GitHub Desktop.
Save kbroman/6d7697f0f084cb9b1372 to your computer and use it in GitHub Desktop.
<!DOCTYPE HTML>
<html> <head>
<title>BioC 2015 live coding</title>
<style>body{font-family:sans-serif;}</style>
</head>
<body>
<h2>BioC 2015 live coding</h2>
<script charset="utf-8"
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js">
</script>
<script type="text/javascript">
h = 500;
w = 800;
svg= d3.select("body").append("svg")
.attr("height", h)
.attr("width", w);
svg.append("rect")
.attr("height", h)
.attr("width", w)
.attr("fill", "#ccc");
data = []
for(i =0; i<20; i++) {
data.push({x: Math.random()*w,
y: Math.random()*h});
}
svg.selectAll("empty")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 5)
.attr("fill", "Orchid")
.on("mouseover", function() {
d3.select(this).attr("r", 10)
})
.on("mouseout", function() {
d3.select(this).attr("r", 5)
});
</script>
</body> </html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment