Skip to content

Instantly share code, notes, and snippets.

@ludwigschubert

ludwigschubert/index.html

Created December 5, 2016 03:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ludwigschubert/a0280f3696a2a1c773cc73813d30af22 to your computer and use it in GitHub Desktop.
Save ludwigschubert/a0280f3696a2a1c773cc73813d30af22 to your computer and use it in GitHub Desktop.
Download ZIP
Filtering out duplicate links
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment