block by pstuffa 694c0be0048190141ecf

Bugs

Full Screen

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="//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>