Graph Experiments I by zeffii

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="800" height="500"></canvas>
<script src="https://d3js.org/d3.v4.0.0-alpha.33.min.js"></script>
<script>

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height;
  
var manyBody = d3
	.forceManyBody()
	.distanceMax(100)
	.theta(5);
  
var forceLink = d3
	.forceLink()
	.id(function(d) { return d.id; })

var simulation = d3.forceSimulation()
    .force("charge", manyBody)
    .force("link", forceLink)
    .force("center", d3.forceCenter());
  
var n = 1000;
  
var nodes1 = d3
	.range(n)
	.map(function(d,id) { return { id: id }; });
  
var links1 = d3
	.range(n * 2)
	.map(function() {
    var source = d3.shuffle(nodes1)[0];
    var target = d3.shuffle(nodes1)[0];
    return { source: source, target: target };
  });
  
var links2 = links1.slice(n/2);

var toggle = true;
    
setInterval(function() {
  toggle = !toggle;
  if (toggle) {
    update(nodes1, links1)
  }
  else {
    update(nodes1, links2)
  }
}, 1000);
update(nodes1, links1);

simulation
  .on('tick', ticked)
	.alphaDecay(0.09)

function update(nodes, links) {
  simulation
  	.nodes(nodes)
		.force("link")
    .links(links);
  
  //simulation.restart();
}
  
function ticked() {
  context.clearRect(0, 0, width, height);
  context.save();
  context.translate(width / 2, height / 2);

  context.beginPath();
  simulation.force('link').links().forEach(drawLink);
  context.strokeStyle = "rgba(0,0,0,0.05)";
  context.stroke();

  //context.beginPath();
  //simulation.nodes().forEach(drawNode);
  //context.fillStyle = "rgba(0,0,0,0.5)";
  //context.fill();
  //context.strokeStyle = "#fff";
  //context.stroke();

  context.restore();
}
  
function drawLink(d) {
  context.moveTo(d.target.x, 0);
  context.lineTo(0, d.target.y);
}

function drawNode(d) {
  context.moveTo(d.x + 3, d.y);
  context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
}

</script>