Skip to content

Instantly share code, notes, and snippets.

@ngopal

ngopal/index.html

Last active August 29, 2015 14:22
Show Gist options
  • Save ngopal/e7f0aef01fe31b9c0f3f to your computer and use it in GitHub Desktop.
Save ngopal/e7f0aef01fe31b9c0f3f to your computer and use it in GitHub Desktop.
Download ZIP
Just making silly pretty pictures. I guess you might be able to learn a thing or two about D3 transitions if you don't already know how they work.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var margin = {"left":20, "top":10, "right":20, "bottom":20}
var info = d3.range(1000).map(function(k) {return Math.random()*100;});
var colors = d3.scale.category20();
var colorsb = d3.scale.category20b();
var canvas = d3.select("body")
.append("svg")
.attr("width", 800)
.attr("height", 800)
.attr("transform", "translate("+margin.left+","+margin.top+")");
var circles = canvas.selectAll("circle")
.data(info)
.enter()
.append("circle")
.attr("cx", function(d) { return d*Math.random()*40;})
.attr("cy", function(d) { return d*Math.random()*40;})
.attr("r", function(d) { return d;})
.attr("fill", function(d) { return colors(d);})
.transition()
.attr("cx", function(d) { return d*Math.random()*40;})
.delay(3000)
.duration(3000)
.transition()
.attr("cy", function(d) { return d*Math.random()*40;})
.duration(3000)
.transition()
.attr("fill", function(d) { return colorsb(d);})
.duration(3000)
.transition()
.attr("r", function(d) { return d/2;})
.duration(3000);
var emmy = d3.selectAll("circle")
.on("mouseover", function(d,i) {
console.log(d,i);
d3.select(this)
.transition()
.attr("r", function(d) { return d*4;})
.duration(function(d) { return d*100;})
.transition()
.attr("r", function(d) { return d;})
.duration(function(d) { return d*100;})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment