D3 Examples - D3-Fuse Demo

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.js"></script>
<script src="d3-fuse.js"></script>
<body>
<script>
​
var width = 960; 
var height = 500
var svgCluster = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
​
  
// Create nodes:
var nodes = d3.range(1200).map(function(d) {
  return {
    index: d,
    r: 3,
    a: Math.PI,
    x: Math.random()*width,
    y: Math.random()*height 
  }
})
​
// Set up cluster
var cluster = d3.fuse()
  .nodes(nodes);
​
cluster();
​
var circles = svgCluster.selectAll("circle")
  .data(nodes)//.filter(function(d) { return d.r != 0; }))
  .enter()
  .append("circle")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return d.r; })
  .attr("fill","#a8ddb5");
​
function parent(d) {
    while(d.layout && d.layout.parent && d.layout.parent.x) {
        d = d.layout.parent;
    }
    return d;
}
​
var scale = d3.scaleLinear()
  //.range(["#a8ddb5","#43a2ca","#0868ac"])
  .range(["#ccebc5","#7bccc4","#0868ac"])
  .domain([3,12,40]);
​
​
​
var k = 1;
var grow = true;
d3.interval(function() {
    grow ? k*=1.3 : k/= 1.3;
    if(k > 2.5) grow = false;
    if(k < 1) grow = true;
    nodes.forEach(function(node) {
      node.r = 3 * k;
      node.a = Math.PI * node.r * node.r;   
    })
    cluster();
    circles.sort(function(a,b) {
        parent(a).layout.r - parent(b).layout.r;
    })
    circles.transition()
    .attr("cx", function(d) { return parent(d).layout.x; })
    .attr("cy", function(d) { return parent(d).layout.y; })
    .attr("r", function(d) { return parent(d).layout.r; })
    .attr("fill", function(d) { return scale(parent(d).layout.r); })
    .duration(1000);
    
}, 1500);
</script>
    