Skip to content

Commit

Permalink
a new example
Browse files Browse the repository at this point in the history 
some changes to d3adaptor to allow not specifying any node list
  • Loading branch information
@tgdwyer
tgdwyer committed Apr 4, 2014
1 parent d4132d7 commit 7cf8e28
Show file tree
Hide file tree
Showing 6 changed files with 209 additions and 15 deletions.
2 changes: 1 addition & 1 deletion WebCola/WebCola.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@
<Content Include="examples\brainnetwork2.html" />
<Content Include="examples\disconnected_graphs.html" />
<Content Include="examples\graphdata\SucroseBreakdownDicots-flowlayout.svg" />
<Content Include="examples\HtmlPage1.html" />
<Content Include="examples\movies.html" />
<Content Include="examples\browsemovies.html" />
<Content Include="examples\powergraph.html" />
<Content Include="examples\sucrosebreakdown-handdrawn.png" />
<Content Include="examples\sucrosebreakdown.html" />
<Content Include="examples\alignment.png" />
<Content Include="examples\ariel.html" />
<Content Include="examples\AlexNetwork.html" />
<Content Include="examples\unix.html" />
<Content Include="examples\unix.png" />
<Content Include="src\d3adaptor.js" />
Expand Down
134 changes: 134 additions & 0 deletions WebCola/examples/AlexNetwork.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Egocentric Network</title>
<style>

@import url(../style.css);
.node {
stroke: #fff;
stroke-width: 1.5px;
}

.link {
stroke: #999;
stroke-opacity: .8;
}

</style>
</head>
<body>
<h1>Egocentric Network</h1>
<script src="../extern/d3.v3.js"></script>
<script src="../cola.v1.min.js"></script>
<script src="../src/d3adaptor.js"></script>
<script src="../src/linklengths.js"></script>
<script>
var width = 700,
height = 350;

var color = d3.scale.category20();

var cola = cola.d3adaptor()
.linkDistance(10)
.size([width, height]);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

d3.select("body").append("button").attr("id", "removeSelfButton").text("Disconnect Self").on("click", disconnectNode0);

var edges = [];
var n = 0;

d3.text("alex/matrix_ego.txt",
function (error, text) {
var lines = text.split('\n').map(function (s) { return s.trim() });
lines.forEach(function (l, i) {
if (l.length > 0) {
l.split(' ').forEach(function (d, j) {
if (Number(d) > 0) {
edges.push({source: i, target: j});
}
});
}
++n;
});
loaded();
});

var link, node;

function disconnectNode0() {
edges = edges.filter(function (e) {
return e.source.index !== 0 && e.target.index !== 0;
});
cola.stop();
cola.on("tick", null);
cola.links(edges).start(30);
link.data(cola.links(), function (d) {
return d.source.index + "-" + d.target.index;
}).exit().remove();
cola.on("tick", function () {
link.transition().duration(2000).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; });

node.transition().duration(2000).attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; }).each("end", function () {
cola.on("tick", regularTick);
});
});
}

function regularTick () {
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; });

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

function loaded() {
cola
.links(edges)
//.jaccardLinkLengths(0.1)
.symmetricDiffLinkLengths()
.defaultNodeSize(20)
.start(30);

var nodes = cola.nodes();

link = svg.selectAll(".link")
.data(cola.links(), function (d) {
return d.source.index + "-" + d.target.index;
});

link.enter().append("line")
.attr("class", "link")
.style("stroke-width", function (d) { return Math.sqrt(d.value); });


node = svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function (d, i) { return color(i > 0) })
.call(cola.drag);

node.append("title")
.text(function (d) { return d.index; });

cola.on("tick", regularTick);
};

</script>
</body>
</html>
36 changes: 36 additions & 0 deletions WebCola/examples/alex/matrix_ego.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00
1.00 0.00 1.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 1.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 1.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 1.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 1.00 1.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 0.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 1.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 1.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 0.00 0.00 0.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 0.00 1.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 1.00 1.00 0.00 0.00
1.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00 0.00
3 changes: 1 addition & 2 deletions WebCola/examples/unconstrained.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@
<body>
<h1>Unconstrained graph layout</h1>
<script src="../extern/d3.v3.js"></script>
<script src="../cola.v1.min.js"></script>
<script src="../src/descent.js"></script>
<script src="../cola.v1.min.js"></script>
<script>
var width = 960,
height = 500;
Expand Down
5 changes: 2 additions & 3 deletions WebCola/examples/unix.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,13 +97,12 @@ <h2>Directed graph flow layout and shortest-path edge routing</h2>
}

cola
.linkDistance(150)
.linkDistance(function () { return 150; })
.avoidOverlaps(true)
.flowLayout('x')
.size([width, height])
.nodes(nodes)
.links(edges)
.jaccardLinkLengths();
.links(edges);

var link = vis.selectAll(".link")
.data(edges)
Expand Down
44 changes: 35 additions & 9 deletions WebCola/src/d3adaptor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ var cola;
distanceMatrix = null,
descent = null,
directedLinkConstraints = null,
threshold = 1e-5;
threshold = 1e-5,
defaultNodeSize = 10;

d3adaptor.tick = function () {
if (alpha < threshold) {
Expand Down Expand Up @@ -80,12 +81,26 @@ var cola;
};

/**
* a list of nodes
* the list of nodes.
* If nodes has not been set, but links has, then we instantiate a nodes list here, of the correct size,
* before returning it.
* @property nodes {Array}
* @default empty list
*/
d3adaptor.nodes = function (v) {
if (!arguments.length) return nodes;
if (!arguments.length) {
if (nodes.length === 0 && links.length > 0) {
var n = 0;
links.forEach(function (l) {
n = Math.max(n, l.source, l.target);
});
nodes = new Array(++n);
for (var i = 0; i < n; ++i) {
nodes[i] = {};
}
}
return nodes;
}
nodes = v;
return d3adaptor;
};
Expand Down Expand Up @@ -192,10 +207,21 @@ var cola;
* @property size
* @type {Array of Number}
*/
d3adaptor.size = function (x) {
d3adaptor.size = function (x) {
if (!arguments.length) return size;
size = x;
return d3adaptor;
return d3adaptor;
};

/**
* Default size (assume nodes are square so both width and height) to use in packing if node width/height are not specified.
* @property defaultNodeSize
* @type {Number}
*/
d3adaptor.defaultNodeSize = function (x) {
if (!arguments.length) return defaultNodeSize;
defaultNodeSize = x;
return d3adaptor;
};

d3adaptor.linkDistance = function (x) {
Expand Down Expand Up @@ -231,12 +257,12 @@ var cola;
};

d3adaptor.symmetricDiffLinkLengths = function (w) {
cola.symmetricDiffLinkLengths(nodes.length, links, w);
cola.symmetricDiffLinkLengths(this.nodes().length, links, w);
return d3adaptor;
}

d3adaptor.jaccardLinkLengths = function (w) {
cola.jaccardLinkLengths(nodes.length, links, w)
cola.jaccardLinkLengths(this.nodes().length, links, w)
return d3adaptor;
}

Expand All @@ -250,7 +276,7 @@ var cola;
d3adaptor.start = function () {
var i,
j,
n = nodes.length,
n = this.nodes().length,
N = n + 2 * groups.length,
m = links.length,
w = size[0],
Expand Down Expand Up @@ -351,7 +377,7 @@ var cola;

// recalculate nodes position for disconnected graphs
if (!distanceMatrix && handleDisconnected) {
applyPacking(separateGraphs(nodes, links), w, h);
applyPacking(separateGraphs(nodes, links), w, h, defaultNodeSize);

nodes.forEach(function (v, i) {
descent.x[0][i] = v.x, descent.x[1][i] = v.y;
Expand Down

0 comments on commit 7cf8e28

Please sign in to comment.