Squares by pstuffa

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([40,0])
  .range([0,5]);

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(40))
  .enter().append("rect")
  .attr("class", "rectangles")
  .attr("x",width/2 - 5)
  .attr("y",height/2 - 5)
  .attr("height",10)
  .attr("width",10)
  .style("fill-opacity",0)

rects
  .transition()
  .duration(300)
  .ease("quad")
  .delay(function(d,i) { return i*100; })
  .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", .3);


setTimeout(function() {

  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)) });

  })

},4500)

</script>