Skip to content

Instantly share code, notes, and snippets.

@qoh

qoh/index.html

Created January 24, 2013 15:06
Show Gist options
  • Save qoh/4622733 to your computer and use it in GitHub Desktop.
Save qoh/4622733 to your computer and use it in GitHub Desktop.
Download ZIP
I was messing around with stuff and then this happened.
Raw
index.html
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript">
var mouse = [480, 250]
var svg = d3.select("body").append("svg:svg")
.attr("width", "100%")
.attr("height", "100%");
var g = svg.selectAll("g")
.data(d3.range(100))
.enter().append("svg:g")
.attr("transform", "translate(" + mouse + ")");
g.append("svg:circle")
.attr("cx", 6)
.attr("cy", 6)
.attr("r", 25)
.attr("x", -12.5)
.attr("y", -12.5)
.attr("transform", function(d, i) { return "scale(" + 1.75 + (1 - d / 100) * 1 + ")"; })
.style("fill", d3.scale.category20c());
g.map(function(d) {
return {center: [0, 0]};
});
svg.on("mousemove", function() {
mouse = d3.svg.mouse(this);
});
function shift(d, pos, mag) {
if( d.center[0] > pos[0] )
d.velocity[0] += mag;
else if( d.center[0] < pos[0] )
d.velocity[0] -= mag;
if( d.center[1] > pos[1] )
d.velocity[1] += mag;
else if( d.center[1] < pos[1] )
d.velocity[1] -= mag;
}
d3.timer(function() {
g.attr("transform", function(d, i) {
d.center[0] += (mouse[0] - d.center[0]) / (i * 1.5 + 25);
d.center[1] += (mouse[1] - d.center[1]) / (i * 1.5 + 25);
return "translate(" + d.center + ")";
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment