D3 Examples - Grid layout in v4

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-grid.js"></script>
<script>
var con  = [],
    lab = [];
​
var width = 960,
    height = 500;
​
//var color = d3.scale.category10();
​
var pointGrid = d3.grid()
  .points()
  .size([100, 100]);
​
var svg = d3.select("body").append("svg")
  .attr('width', width)
  .attr('height', height)
.append("g")
  .attr("transform", "translate(70,70)");
​
var concontainer = svg.append('g')
    .attr("transform", "translate(70,70)")
    .style('background-color', 'lightblue');
var labcontainer = svg.append('g')
    .attr("transform", "translate(370,70)")
    .style('background-color', 'lightcoral');
​
var tick = setInterval(push, 500);
​
function update(){
​
  var condots = concontainer.selectAll(".point")
    .data(pointGrid(con));
  condots.enter().append("circle")
    .attr("class", "point")
    .attr("r", 1e-6)
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  condots.transition()
    .attr("r", 10)
    .attr('fill', 'orange')
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  condots.exit().transition()
    .attr("r", 1e-6)
    .remove();
​
  var labdots = labcontainer.selectAll(".point")
      .data(pointGrid(lab));
  labdots.enter().append("circle")
    .attr("class", "point")
    .attr("r", 1e-6)
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  labdots.transition()
    .attr("r", 10)
    .attr('fill', 'steelblue')
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  labdots.exit().transition()
    .attr("r", 1e-6)
    .remove();
}
​
function push() {
  var i = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
  while(i>1) {
    con.push({});
    i--;
  }
  var y = Math.floor(Math.random() * (7 - 1 + 1)) + 1;
  while(y>1) {
    lab.push({});
    y--;
  }
  lab.push({});
  update();
  if (con.length > 10) {
    clearInterval(tick);
    tick = setInterval(pop, 500);
  }
}
​
function pop() {
  con.pop();
  lab.pop();
  update();
  if (con.length < 2) {
    clearInterval(tick);
    tick = setInterval(push, 500);
  }
}
</script>
    