Grid layout

forked from herrstucki's block: Grid layout

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font-family: Helvetica;
  font-size: 10px;
}
.point, .rect {
  fill: #222;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="d3-grid.js"></script>
<script>

var points = [];
var rects = [];

var width = 960,
    height = 500;

var pointGrid = d3.layout.grid()
  .points()
  .size([360, 360]);

var rectGrid = d3.layout.grid()
  .bands()
  .size([360, 360])
  .padding([0.1, 0.1]);

var svg = d3.select("body").append("svg")
  .attr({
    width: width,
    height: height
  })
.append("g")
  .attr("transform", "translate(70,70)");

var tick = setInterval(push, 500);

function update() {
  var point = svg.selectAll(".point")
    .data(pointGrid(points));
  point.enter().append("circle")
    .attr("class", "point")
    .attr("r", 1e-6)
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  point.transition()
    .attr("r", 5)
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  point.exit().transition()
    .attr("r", 1e-6)
    .remove();

var rect = svg.selectAll(".rect")
    .data(rectGrid(rects));
  rect.enter().append("rect")
    .attr("class", "rect")
    .attr("width", rectGrid.nodeSize()[0])
    .attr("height", rectGrid.nodeSize()[1])
    .attr("transform", function(d) { return "translate(" + (d.x + 460)+ "," + d.y + ")"; })
    .style("opacity", 1e-6);
  rect.transition()
    .attr("width", rectGrid.nodeSize()[0])
    .attr("height", rectGrid.nodeSize()[1])
    .attr("transform", function(d) { return "translate(" + (d.x + 460)+ "," + d.y + ")"; })
    .style("opacity", 1);
  rect.exit().transition()
    .style("opacity", 1e-6)
    .remove();
}

function push() {
  points.push({});
  rects.push({});
  update();
  if (points.length > 15) {
    clearInterval(tick);
    tick = setInterval(pop, 500);
  }
}

function pop() {
  points.pop();
  rects.pop();
  update();
  if (points.length < 2) {
    clearInterval(tick);
    tick = setInterval(push, 500);
  }
}
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js