Dynamic Force Layout

forked from git-ashish's block: Dynamic Force Layout

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var w = 960,
    h = 500,
    margin = 30,
    nodes = [],
    node;
    radius = w / 2;
    strokeWidth = 4;
    radius = w / 2,
    hyp2 = Math.pow(radius, 2),
    nodeBaseRad = 5;

var vis = d3.select("body").append("svg")
    .style("background","black")
    .attr("width", w)
    .attr("height", h)
    .append("g")
    .attr('transform', 'translate(' + margin + ',' + margin + ')');

/*
var vis = svg.append('path').attr("d", d3.svg.symbol()).size(300)
    //.style('stroke-width', strokeWidth * 2)
    .attr({
        //class: 'pool',
        r: radius,
        cy: 0,
        cx: 0,
        transform: 'translate(' + w / 2 + ',' + h / 2 + ')'
    });
    */
//console.log(vis)   
var force = d3.layout.force()
    .nodes(nodes)
    //.charge(0)
    .gravity(1)
    .links([])
    .size([w, h]);

force.on("tick", function(e) {
  vis.selectAll("circle")
     //.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; 
                                     
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })

});
  
  
  function pythag(r, b, coord) {
    r += nodeBaseRad+200;

// force use of b coord that exists in circle to avoid sqrt(x<0)
    b = Math.min(w - r - strokeWidth, Math.max(r + strokeWidth, b));

var b2 = Math.pow((b - radius), 2),
        a = Math.sqrt(hyp2 - b2);

// radius - sqrt(hyp^2 - b^2) < coord < sqrt(hyp^2 - b^2) + radius
    coord = Math.max(radius - a + r + strokeWidth,
                Math.min(a + radius - r - strokeWidth, coord));

return coord;
}

setInterval(function(){

size=function() {
    //nodes.pop();
    t=Math.round(Math.random() * 60);
    //d3.selectAll("g").filter(function(d) { console.log(d);return d.size < 30 });
    //console.log(t);
    //d3.select("#" + t).empty();
    //d3.select("path").filter(function(d){ if(d.size<30){return 1}; return 0;})
   //console.log(nodes);
   //p = d3.selectAll("path").filter("path#"+t);
   //console.log(t);
    p = d3.selectAll("circle").filter(function(d){return d.size == t })
    //p = d3.selectAll("path").datum(21);//console.log(p);
    //console.log(d3.selectAll("#15").length);
    if (! p.empty()) {
    //console.log(p);
    //p.style("fill","green").attr('r', 3).transition(;
                                                        
                                                    
    p.attr("r", 1)
    .transition()
    .delay(function(d,i) {return i * 1})
    .duration(2000)
    .style("opacity","0.009")
    .attr("r", 30)
    .transition()
    .duration(100)
    .attr("r", 10).remove()
    //p.each(function(){d3.select(this).remove(); });

console.log(nodes.length);

//p.remove();
    }
   //if (p.empty()) {} //console.log(p);
 
    return t;
  };

//console.log(size());
  // Add a new random shape.
  if (nodes.length < 500) {
  nodes.push({
    type: "circle",//d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)],
    size: size(),
    x: w / 2 + 2 * Math.random() - 1,
    y: h / 2 + 2 * Math.random() - 1
  });
  }

// Restart the layout.
  force.start();
  var colors = d3.range(1).map(d3.scale.category10());

vis.selectAll("circle")
      .data(nodes)
    .enter().append("circle")
    .attr("id", function(d) { return d.size; })
    .attr("r",function(d) { return d.size/10; }) 
      //.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      //.attr("d", d3.svg.symbol()
       // .size(function(d) { return d.size; })
       // .type(function(d) { return d.type; }))
      .style("fill", function(d) {if(d.size>30) {return colors[0];}else{return "red";}})
      .style("stroke", "transparent")
      .style("stroke-width", "15")
      .call(force.drag);

}, 100);

</script>

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

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