Gooey Cell Division

You can do interesting things with data joins and updating data in D3.js I took the gooey effect from Nadieh Bremer's block.

forked from HarryStevens's block: Gooey Cell Division

<html>
  <head>
    <style>
    body {
      margin: 0;
      background: #3a403d;
    }
    .amoeba {
      fill: #fff;
    }
    </style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script>
    var width = window.innerWidth,
      height = window.innerHeight;

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("filter", "url(#gooey)"); //Set the filter on the container svg;

var data = [{group: 1, id: 1, x: width / 2, y: height / 2}];

//SVG filter for the gooey effect
    //Code taken from https://bl.ocks.org/nbremer/69808ec7ec07542ed7df
    var defs = svg.append("defs");

var filter = defs.append("filter").attr("id", "gooey");
    filter.append("feGaussianBlur")
      .attr("in", "SourceGraphic")
      .attr("stdDeviation", "10")
      .attr("result", "blur");
    filter.append("feColorMatrix")
      .attr("in", "blur")
      .attr("mode", "matrix")
      .attr("values", "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7")
      .attr("result", "gooey");
    filter.append("feComposite")
      .attr("in", "SourceGraphic")
      .attr("in2", "gooey")
      .attr("operator", "atop");

function redraw(data){

// transition
      var t = d3.transition()
          .duration(1500);

//JOIN
      var amoeba = svg.selectAll(".amoeba")
        .data(data, function(d){ return d.id; });

// EXIT
      amoeba.exit().remove();

// UPDATE
      amoeba
        .transition(t)
          .attr("cx",function(d){ return d.x; })
          .attr("cy",function(d){ return d.y; });

// ENTER
      amoeba.enter().append("circle")
          .attr("class", "amoeba")
          .attr("r", 50)
          .attr("cx",function(d){ return d.x; })
          .attr("cy",function(d){ return d.y; });
    }

redraw(data);

function run(){
      setTimeout(function(){
        data.forEach(function(d){
          data.push({group: 1, id: data.length + d.id, x: d.x, y: d.y});
        });
        redraw(data);
      }, 750)

setTimeout(function(){
        data.forEach(function(d, i){
          data[i] = {group: d.group, id: d.id, x: width * (d.id / (data.length + 1)), y: d.y};
        });
        redraw(data);
      }, 1500);

setTimeout(function(){
        data.forEach(function(d, i){
          data.push({group: d.group, id: data.length + 1, x: d.x, y: d.y});
        });
        redraw(data);
      }, 3000);

setTimeout(function(){
        data.forEach(function(d, i){
          d.group = i < 2 ? 1 : 2;
          data[i] = {group: d.group, id: i + 1, x: d.x, y: height * (d.group / 3)};
        });
        redraw(data);
      }, 3750);

setTimeout(function(){
        data.forEach(function(d, i){
          data[i] = {group: d.group, id: i + 1, x: d.x, y: height / 2};
        });
        redraw(data);
      }, 6000);

setTimeout(function(){
        data.forEach(function(d, i){
          data[i] = {group: d.group, id: d.id, x: width / 2, y: d.y}
        });
        redraw(data.splice(2, 2));
      }, 8000);

data = [{group: 1, id: 1, x: width / 2, y: height / 2}];
    }

run();

d3.interval(run, 9000);
    </script>
  </body>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js