force test I

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    text { 
      text-anchor: middle; 
      font-size: 1.3em;
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg")
  
    // force
    function tick(e) {      
      node.each(moveToCategoryCenter(e.alpha));
      
      node
        .attr("cx", function(d){ return d.x })
      	.attr("cy", function(d){ return d.y });
    }
     
    function randomCategory(val) {
      var category = "a";
      if (val<0.60) category = "b";
      if (val<0.5) category = "c";
			if (val<0.05) category = "d";

return category;
    }
     
    var nodes = d3.range(1,100).map(function(d) { 
      return { 
      	amount: Math.random()*20,
        category: randomCategory(Math.random())
      } 
    }); 
    
    var categoryCenters = {
      a: {x:100, y: 200},
      b: {x:300, y: 200},
      c: {x:500, y: 200},
      d: {x:700, y: 200},
    } 
    
    var orgCenter = {
      a: {x:400, y: 325},
      b: {x:400, y: 325},
      c: {x:400, y: 325},
      d: {x:400, y: 325},
    } 
    
    var secCategoryCenters = {  
      a: {x:250, y: 450},
      b: {x:550, y: 450},
      c: {x:250, y: 450},
      d: {x:550, y: 450}
    }
    
    var currCenter = orgCenter; 
    
    var labels = [
      { txt: "Category 1", pos: categoryCenters.a },
      { txt: "Category 2", pos: categoryCenters.b },
      { txt: "Category 3", pos: categoryCenters.c },
      { txt: "Category 4", pos: categoryCenters.d }
    ];
    
    var secLabels = [
      { txt: "Category A", pos: secCategoryCenters.a },
      { txt: "Category B", pos: secCategoryCenters.b },
    ]
    
    function moveToCategoryCenter(alpha) {
      return function(d,i) {
           
        var center = currCenter[d.category];

d.x += (center.x - d.x) * alpha*1.1;
        d.y += (center.y - d.y) * alpha*1.1;
      };
    }
        
    function charge(d) {
      return d.amount * d.amount * -1.2; 
    }
    
    var force = d3.layout.force()
    	.nodes(nodes)
    	.size([900,350])
    	.on("tick", tick)
    	.charge(charge);
    
    var node = svg.selectAll("circle")
    	.data(force.nodes())
    	.enter().append("circle")
    	.attr("r", 10)
    	.style({
        "fill": function(d,i) { return i%3 === 0 ? "steelblue" : "orange" },
        "stroke": "#c8c8c8",
      });
   
    function writeCategories(labelData, cls) {
      svg.selectAll("." + cls).data(labelData).enter()
        .append("text").classed(cls, true)
        .attr({
          x: function(d) { return d.pos.x; },
          y: function(d) { return d.pos.y + 100; }
        })
        .text(function(d) { return d.txt; });
    }
    
    function writeSecondaryCategory() {
      
    }
    
    // init labels
    setInterval(function() {
    	animate();  
    }, 5000)
    
    var split = 1;
 		function animate() {
      svg.selectAll("text").remove();
      if (split === 1) {
        writeCategories(labels, 'prim');
        currCenter = categoryCenters;
      }
      else if (split === 2) {
        writeCategories(secLabels, 'sec')
        currCenter = secCategoryCenters;
      }
      else {
      	currCenter = orgCenter;
        split = 0;
      }
      
      split = split+1;
      force.start();
    }
    	
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js