ludwigschubert/index.html

## index.html
<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script>

var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height"),
	color = d3.scaleOrdinal(d3.schemeCategory10);

var a = {id: "a"},
	b = {id: "b"},
	c = {id: "c"},
	nodes = [a, b, c],
	links = [];

var simulation = d3.forceSimulation(nodes)
	.force("charge", d3.forceManyBody().strength(-30))
	.force("link", d3.forceLink(links).distance(200))
	.force("x", d3.forceX())
	.force("y", d3.forceY())
	.alphaTarget(1)
	.on("tick", ticked);

var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),
	link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"),
	node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node");

restart();

d3.interval(function() {
  // nodes.push({id: new Date().toString()});
  // var source = _.sample(nodes);
  // var linkedNodes = _.filter(links, function(link){ link.source == source || link.target == source });
  // var targets = _.difference(nodes, linkedNodes)
  // var target = _.sample(targets);
  // if (source != undefined && target != undefined) {
  //   console.log(source.id);
  //   console.log(target.id);
  //   var link = {source: source, target: target}
  //   links.push(link);
  // }

  nodes.push({id: new Date().toString()});
  var ns = _.sample(nodes, 2);
  var link = {source: ns[0], target: ns[1]}
  links.push(link);
  var dict = {}
  links = _.filter(links, function(link) {
    var source = link.source.id;
    var target = link.target.id;
    if (dict[source] == undefined) {
      console.log("havent seen this source")
      dict[source] = [ target ]
      return true
    } else {
      console.log("have seen this source")
      if(_.contains(dict[source], target)) {
        console.log("target is linked to this source")
        return false
      } else {
        console.log("target is NOT linked to this source")
        dict[source].push(target)
        return true
      }
    }
  });
  console.log()
  restart();
}, 500, d3.now());

// d3.interval(function() {
//   nodes.pop(); // Remove c.
//   links.pop(); // Remove c-a.
//   links.pop(); // Remove b-c.
//   restart();
// }, 2000, d3.now());

// d3.interval(function() {
//   nodes.push(c); // Re-add c.
//   links.push({source: b, target: c}); // Re-add b-c.
//   links.push({source: c, target: a}); // Re-add c-a.
//   restart();
// }, 2000, d3.now() + 1000);

function restart() {

  // Apply the general update pattern to the nodes.
  node = node.data(nodes, function(d) { return d.id;});
  node.exit().remove();
  node = node.enter().append("circle").attr("fill", function(d) { return color(d.id); }).attr("r", 8).merge(node);

  // Apply the general update pattern to the links.
  link = link.data(links, function(d) { return d.source.id + "-" + d.target.id; });
  link.exit().remove();
  link = link.enter().append("line").merge(link);

  // Update and restart the simulation.
  simulation.nodes(nodes);
  simulation.force("link").links(links);
  simulation.alpha(1).restart();
}

function ticked() {
  node.attr("cx", function(d) { return d.x; })
	  .attr("cy", function(d) { return d.y; })

  link.attr("x1", function(d) { return d.source.x; })
	  .attr("y1", function(d) { return d.source.y; })
	  .attr("x2", function(d) { return d.target.x; })
	  .attr("y2", function(d) { return d.target.y; });
}

</script>
	<!DOCTYPE html>
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="http://underscorejs.org/underscore-min.js"></script>
	<script>

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height"),
	color = d3.scaleOrdinal(d3.schemeCategory10);

	var a = {id: "a"},
	b = {id: "b"},
	c = {id: "c"},
	nodes = [a, b, c],
	links = [];

	var simulation = d3.forceSimulation(nodes)
	.force("charge", d3.forceManyBody().strength(-30))
	.force("link", d3.forceLink(links).distance(200))
	.force("x", d3.forceX())
	.force("y", d3.forceY())
	.alphaTarget(1)
	.on("tick", ticked);

	var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),
	link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"),
	node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node");

	restart();

	d3.interval(function() {
	// nodes.push({id: new Date().toString()});
	// var source = _.sample(nodes);
	// var linkedNodes = _.filter(links, function(link){ link.source == source \|\| link.target == source });
	// var targets = _.difference(nodes, linkedNodes)
	// var target = _.sample(targets);
	// if (source != undefined && target != undefined) {
	// console.log(source.id);
	// console.log(target.id);
	// var link = {source: source, target: target}
	// links.push(link);
	// }

	nodes.push({id: new Date().toString()});
	var ns = _.sample(nodes, 2);
	var link = {source: ns[0], target: ns[1]}
	links.push(link);
	var dict = {}
	links = _.filter(links, function(link) {
	var source = link.source.id;
	var target = link.target.id;
	if (dict[source] == undefined) {
	console.log("havent seen this source")
	dict[source] = [ target ]
	return true
	} else {
	console.log("have seen this source")
	if(_.contains(dict[source], target)) {
	console.log("target is linked to this source")
	return false
	} else {
	console.log("target is NOT linked to this source")
	dict[source].push(target)
	return true
	}
	}
	});
	console.log()
	restart();
	}, 500, d3.now());

	// d3.interval(function() {
	// nodes.pop(); // Remove c.
	// links.pop(); // Remove c-a.
	// links.pop(); // Remove b-c.
	// restart();
	// }, 2000, d3.now());

	// d3.interval(function() {
	// nodes.push(c); // Re-add c.
	// links.push({source: b, target: c}); // Re-add b-c.
	// links.push({source: c, target: a}); // Re-add c-a.
	// restart();
	// }, 2000, d3.now() + 1000);

	function restart() {

	// Apply the general update pattern to the nodes.
	node = node.data(nodes, function(d) { return d.id;});
	node.exit().remove();
	node = node.enter().append("circle").attr("fill", function(d) { return color(d.id); }).attr("r", 8).merge(node);

	// Apply the general update pattern to the links.
	link = link.data(links, function(d) { return d.source.id + "-" + d.target.id; });
	link.exit().remove();
	link = link.enter().append("line").merge(link);

	// Update and restart the simulation.
	simulation.nodes(nodes);
	simulation.force("link").links(links);
	simulation.alpha(1).restart();
	}

	function ticked() {
	node.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })

	link.attr("x1", function(d) { return d.source.x; })
	.attr("y1", function(d) { return d.source.y; })
	.attr("x2", function(d) { return d.target.x; })
	.attr("y2", function(d) { return d.target.y; });
	}

	</script>