Old school D3 from simpler times

All examples By author By category About

Andrew-Reid

Full window Github gist

D3-Fuse Demo

Custering with D3-fuse demonstration.

<!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>

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