Grid layout in v4

forked from herrstucki's block: Grid layout

forked from anonymous's block: Grid layout

<!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 pop() {
  con.pop();
  lab.pop();
  update();
  if (con.length < 2) {
    clearInterval(tick);
    tick = setInterval(push, 500);
  }
}
</script>

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

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