Skip to content

Instantly share code, notes, and snippets.

@pstuffa

pstuffa/index.html

Last active September 12, 2016 02:31
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 pstuffa/694c0be0048190141ecf to your computer and use it in GitHub Desktop.
Save pstuffa/694c0be0048190141ecf to your computer and use it in GitHub Desktop.
Download ZIP
Bugs
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
border: 2px solid #000;
background-color: #fffaef;
pointer-effects: none;
}
</style>
<body>
<br />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = { top: 20, right: 20, bottom: 20, left: 20},
square = 100,
width = square*8,
height = square*4,
yChange = 0,
xChange = 0,
iChange = 0;
var xScale = d3.scale.linear()
.domain([0,width + margin.left + margin.right])
.range([-60,60]);
var yScale = d3.scale.linear()
.domain([0,height + margin.top + margin.bottom])
.range([-30,30]);
var iScale = d3.scale.pow()
.exponent(.8)
.domain([0,40])
.range([0,20]);
var svg = d3.select("body")
.append("svg")
.attr("height", height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
var rects = svg.selectAll("rectangles")
.data(new Array(50))
.enter().append("rect")
.attr("class", "rectangles")
.attr("transform",function(d,i) { return i % 2 == 0 ? "rotate(25)" : "rotate(-25)"; })
.attr("width", function(d,i) { return (square*4)-(i*10) })
.attr("height", function(d,i) { return (square*4)-(i*10) })
.attr("x", function(d,i) { return (square*2) + ((i*10)/2) })
.attr("y", function(d,i) { return (square/50) + ((i*10)/2) })
.style("fill", "#fdfcff")
.style("stroke", "#000")
.style("stroke-width", 2)
.style("fill-opacity", 1);
function moveIt() {
rects
.transition()
.duration(function(d,i) { return (i*50)-(i*10); })
.ease("quad")
.delay(function(d,i) { return (i*50)-(i*10); })
.attr("transform","rotate(0)")
.attr("transform","scale(.1)")
.each("end",makeIt)
}
function makeIt() {
rects
.transition()
.duration(function(d,i) { return (i*50)-(i*10); })
.ease("quad")
.delay(function(d,i) { return (i*50)-(i*10); })
.attr("transform",function(d,i) { return i % 2 == 0 ? "rotate(25)" : "rotate(-25)"; })
.attr("transform","scale(1)")
.each("end",moveIt)
}
setTimeout(function() { moveIt(); },1000);
d3.select("svg").on("mousemove", function() {
var m = d3.mouse(this);
yChange = Math.round(yScale(m[1]));
xChange = Math.round(xScale(m[0]));
d3.selectAll(".rectangles")
.attr("x", function(d,i) { return (square*2) + ((i*10)/2) + (xChange * iScale(i)) })
.attr("y", function(d,i) { return (square/50) + ((i*10)/2) + (yChange * iScale(i)) });
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment