cleanup

msgmaxim · Apr 10, 2014 · 7227709 · 7227709
1 parent 8ddbfde
commit 7227709
Show file tree

Hide file tree

Showing 20 changed files with 73 additions and 73 deletions.
diff --git a/WebCola/WebCola.csproj b/WebCola/WebCola.csproj
@@ -24,6 +24,8 @@
     <TypeScriptCompile Include="brain-app\input.ts" />
     <Content Include="examples\brainnetwork2.html" />
     <Content Include="examples\disconnected_graphs.html" />
+    <Content Include="examples\alexnetwork.html" />
+    <Content Include="examples\egonetwork.html" />
     <Content Include="examples\graphdata\SucroseBreakdownDicots-flowlayout.svg" />
     <Content Include="examples\movies.html" />
     <Content Include="examples\browsemovies.html" />
@@ -32,7 +34,6 @@
     <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" />

diff --git a/WebCola/cola.v2.min.js b/WebCola/cola.v2.min.js
diff --git a/WebCola/examples/SucroseBreakdown.html b/WebCola/examples/SucroseBreakdown.html
@@ -46,7 +46,7 @@
 <body onload="parseDunnart()">
     <h1>Metabolic Pathway: Sucrose Breakdown</h1>
 <script src="../extern/d3.v3.js"></script>
-<script src="../cola.v1.min.js"></script>
+<script src="../cola.v2.min.js"></script>
     <!--<script src="../src/d3adaptor.js"></script>-->
 <script>
     var width = 800,

diff --git a/WebCola/examples/alignment.html b/WebCola/examples/alignment.html
@@ -38,10 +38,10 @@
 <body>
     <h1>Alignment constraints with guidelines</h1>
 <script src="../extern/d3.v3.js"></script>
-<script src="../cola.v1.min.js"></script>
+<script src="../cola.v2.min.js"></script>
 <script>
     var width = 800,
-        height = 300;
+        height = 400;
 
     var color = d3.scale.category20();
 
@@ -55,7 +55,7 @@ <h1>Alignment constraints with guidelines</h1>
         .attr("height", height);
 
     d3.json("graphdata/alignmentconstraints.json", function (error, graph) {
-        graph.nodes.forEach(function (v) { v.x = 400, v.y = 70 });
+        graph.nodes.forEach(function (v) { v.x = 400, v.y = 50 });
         d3cola
             .nodes(graph.nodes)
             .links(graph.links)

diff --git a/WebCola/examples/ariel.html b/WebCola/examples/ariel.html
@@ -26,9 +26,9 @@
 <body>
     <h1>Graph with variable link lengths</h1>
 <script src="../extern/d3.v3.js"></script>
-    <script src="../cola.v1.min.js"></script>
+    <script src="../cola.v2.min.js"></script>
 <script>
-    var width = 800,
+    var width = 600,
         height = 500;
 
     var color = d3.scale.category20();

diff --git a/WebCola/examples/brainnetwork.html b/WebCola/examples/brainnetwork.html
@@ -22,7 +22,7 @@
 <body>
     <h1>Brain network MDS</h1>
 <script src="../extern/d3.v3.min.js"></script>
-<script src="../cola.v1.min.js"></script>
+<script src="../cola.v2.min.js"></script>
 <script>
     var width = 960,
         height = 500;

diff --git a/WebCola/examples/brainnetwork2.html b/WebCola/examples/brainnetwork2.html
@@ -21,7 +21,7 @@
 </head>
 <body>
 <script src="../extern/d3.v3.js"></script>
-    <script src="../cola.v1.min.js"></script>
+    <script src="../cola.v2.min.js"></script>
 <script>
     var width = 1000,
         height = 500;

diff --git a/WebCola/examples/brainnetworkmultiview.html b/WebCola/examples/brainnetworkmultiview.html
@@ -22,7 +22,7 @@
 <body>
     <h1>Brain network MDS</h1>
 <script src="../extern/d3.v3.js"></script>
-<script src="../cola.v1.min.js"></script>
+<script src="../cola.v2.min.js"></script>
 <script>
     var width = 480,
         height = 500;

diff --git a/WebCola/examples/downwardedges.html b/WebCola/examples/downwardedges.html
@@ -25,9 +25,7 @@
 <body>
 <h1>Directed Graph with downward-pointing edges</h1>
 <script src="../extern/d3.v3.js"></script>
-    <script src="../cola.v2.min.js"></script>
-    <script src="../src/d3adaptor.js"></script>
-    <script src="../src/linklengths.js"></script>
+    <script src="../cola.v2.min.js"></script>
 <script>
     var width = 960,
         height = 500;
@@ -50,11 +48,9 @@ <h1>Directed Graph with downward-pointing edges</h1>
         d3cola
             .nodes(graph.nodes)
             .links(graph.links)
-            .flowLayout("y", 30);
-
-        d3cola//.linkDistance(d3cola.symmetricDiffLinkLengths(6));
-            .constraints(graph.constraints);
-        d3cola.start(10,20,20);
+            .flowLayout("y", 30)
+            .linkDistance(d3cola.symmetricDiffLinkLengths(6))
+            .start(10,20,20);
 
         // define arrow markers for graph links
         svg.append('svg:defs').append('svg:marker')
@@ -79,7 +75,7 @@ <h1>Directed Graph with downward-pointing edges</h1>
             .attr("class", "node")
             .attr("r", nodeRadius)
             .style("fill", function (d) { return color(d.group); })
-            .call(cola.drag);
+            .call(d3cola.drag);
 
         node.append("title")
             .text(function (d) { return d.name; });

diff --git a/WebCola/examples/AlexNetwork.html → WebCola/examples/egonetwork.html b/WebCola/examples/AlexNetwork.html → WebCola/examples/egonetwork.html
@@ -22,24 +22,24 @@
 <body>
     <h1>Egocentric Network</h1>
 <script src="../extern/d3.v3.js"></script>
-    <script src="../cola.v1.min.js"></script>
+    <script src="../cola.v2.min.js"></script>
     <script src="../src/d3adaptor.js"></script>
     <script src="../src/linklengths.js"></script>
 <script>
-    var width = 700,
+    var width = 300,
         height = 350;
 
     var color = d3.scale.category20();
 
-    var cola = cola.d3adaptor()
-        .linkDistance(10)
+    d3.select("body").append("button").attr("id", "removeSelfButton").text("Disconnect Self").on("click", disconnectNode0);
+
+    var d3cola = cola.d3adaptor().convergenceThreshold(1e-4)
         .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;
@@ -66,21 +66,21 @@ <h1>Egocentric Network</h1>
         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) {
+        d3cola.stop();
+        d3cola.on("tick", null);
+        d3cola.links(edges).start(30);
+        link.data(d3cola.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; })
+        d3cola.on("tick", function () {
+            link.transition().duration(1000).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; })
+            node.transition().duration(1000).attr("cx", function (d) { return d.x; })
                 .attr("cy", function (d) { return d.y; }).each("end", function () {
-                    cola.on("tick", regularTick);
+                    d3cola.on("tick", regularTick);
                 });
         });
     }
@@ -96,17 +96,16 @@ <h1>Egocentric Network</h1>
     };
 
     function loaded() {
-        cola
+        d3cola
             .links(edges)
-        //.jaccardLinkLengths(0.1)
-        .symmetricDiffLinkLengths()
-            .defaultNodeSize(20)
+            .linkDistance(d3cola.symmetricDiffLinkLengths(8))
             .start(30);
 
-        var nodes = cola.nodes();
+        var nodes = d3cola.nodes();
+        nodes.forEach(function (v) { v.width = 20; v.height = 20; });
 
         link = svg.selectAll(".link")
-            .data(cola.links(), function (d) {
+            .data(d3cola.links(), function (d) {
                 return d.source.index + "-" + d.target.index;
             });
 
@@ -119,16 +118,18 @@ <h1>Egocentric Network</h1>
             .data(nodes)
           .enter().append("circle")
             .attr("class", "node")
-            .attr("r", 5)
-            .style("fill", function (d, i) { return color(i > 0) })
-            .call(cola.drag);
+            .attr("r", function (d, i) { return i === 0 ? 7 : 5 })
+            .style("fill", function (d, i) { return i === 0 ? "red" : "#8e8ec7" })
+            .call(d3cola.drag);
 
         node.append("title")
             .text(function (d) { return d.index; });
 
-        cola.on("tick", regularTick);
+        d3cola.on("tick", regularTick);
     };
 
 </script>
+<p>This is the friend network of a particular person (the red node).  Since by definition there is a link from the red node to all the blue nodes (their friends),
+    there's really no point showing all those links.  Therefore, pressing the button removes those links and rearranges the network to tidy it up.
 </body>
 </html>
diff --git a/WebCola/examples/modifyinggraph.html b/WebCola/examples/modifyinggraph.html
@@ -22,7 +22,7 @@
 <body>
     <h1>Continuous layout while graph is changing</h1>
 <script src="../extern/d3.v3.js"></script>
-<script src="../cola.v1.min.js"></script>
+<script src="../cola.v2.min.js"></script>
 <script>
 
     var width = 960,

diff --git a/WebCola/examples/nonoverlapping.html b/WebCola/examples/nonoverlapping.html
@@ -2,7 +2,7 @@
 <head>
     <script src="../extern/svg.js"></script>
     <script src="../extern/svg.draggable.js"></script>
-    <script src="../cola.v1.min.js"></script>
+    <script src="../cola.v2.min.js"></script>
     <script src="rectangletest.js"></script>
 </head>
 <body>

diff --git a/WebCola/examples/onlinebrowse.html b/WebCola/examples/onlinebrowse.html
@@ -30,7 +30,7 @@ <h1>Online Graph Exploration</h1>
 <p>Red nodes are incomplete.  Click on them to expand their neighbours.</p>
 <script src="../extern/d3.v3.js"></script>
 <script src="../extern/fullscreen.js"></script>
-<script src="../cola.v1.min.js"></script>
+<script src="../cola.v2.min.js"></script>
 <script>
     var width = 960,
         height = 500,

diff --git a/WebCola/examples/powergraph.html b/WebCola/examples/powergraph.html
@@ -41,7 +41,7 @@
 <body>
     <h1>Power graph representation of a dense graph</h1>
 <script src="../extern/d3.v3.js"></script>
-    <script src="../cola.v1.min.js"></script>
+    <script src="../cola.v2.min.js"></script>
 <script>
     var width = 960,
         height = 500;

diff --git a/WebCola/examples/smallgroups.html b/WebCola/examples/smallgroups.html
@@ -39,7 +39,7 @@
 <body>
     <h1>Layout with hierarchical grouping</h1>
 <script src="../extern/d3.v3.js"></script>
-    <script src="../cola.v1.min.js"></script>
+    <script src="../cola.v2.min.js"></script>
 <script>
     var width = 960,
         height = 500;

diff --git a/WebCola/examples/smallnonoverlappinggraph.html b/WebCola/examples/smallnonoverlappinggraph.html
@@ -31,7 +31,7 @@
 <body>
     <h1>Disconnected graph with non-overlap constraints</h1>
 <script src="../extern/d3.v3.js"></script>
-<script src="../cola.v1.min.js"></script>
+<script src="../cola.v2.min.js"></script>
 <script>
     var width = 960,
         height = 500;

diff --git a/WebCola/index.html b/WebCola/index.html
@@ -76,6 +76,8 @@ <h2>Constraint-Based Layout in the Browser</h2>
             "browsemovies",
             "sucrosebreakdown",
             "unix",
+            "ariel",
+            "egonetwork",
             "disconnected_graphs"
         ];
 
@@ -128,6 +130,7 @@ <h2>Constraint-Based Layout in the Browser</h2>
             <ul> <li>Maxim Shishmarev
                 </li>
                 <li>Nicholas Smith</li>
+                <li><a href="https://github.com/bollwyvl">bollwyvl</a></li>
                 <li><a href="https://github.com/Craxic">Matt Ready</a></li>
             </ul> 
         </p>
@@ -175,7 +178,7 @@ <h2>Getting Started</h2>
 </code></pre>
                 </td>
                 <td>
-<pre><code>var cola = cola.d3adaptor()
+<pre><code>var d3cola = cola.d3adaptor()
     .linkDistance(30)
     .size([width, height]);
 </code></pre>
@@ -193,19 +196,19 @@ <h2>Getting Started</h2>
             There are some other optional parameters available.  In the <a href="examples/downwardedges.html">downward pointing edges example</a>
             we kick off layout like so:
         </p>
-<pre><code>cola
+<pre><code>d3cola
     .nodes(graph.nodes)
     .links(graph.links)         
     .constraints(graph.constraints)
-    .linkDistance(cola.symmetricDiffLinkLengths(5))
+    .linkDistance(d3cola.symmetricDiffLinkLengths(5))
     .avoidOverlaps(true)
     .start(10,15,20);
 </code></pre>
         <p>We specify nodes and links exactly as in D3 force layout.  However, <code>constraints</code> is a new parameter.  It is an array containing constraints specified like so:<p>
         <p><pre><code>{"axis":"y", "left":0, "right":1, "gap":25}</code></pre></p>
         <p>This says that the center of <code>graph.nodes[0]</code> must be at least 25 pixels above the center of <code>graph.nodes[1]</code>.  To be more precise, it is an inequality constraint that requires: <pre><code>graph.nodes[0].y + gap <= graph.nodes[1].y</code></pre></p>
         <p><code>avoidOverlaps(true)</code> dynamically generates constraints while layout progresses in order to prevent the bounding boxes of nodes from sliding over one another (see <a href="examples/smallnonoverlappinggraph.html">this example</a>).</p>
-        <p><code>linkDistance(symmetricDiffLinkLengths(5))</code> computes ideal lengths on each link to make extra space around high-degree nodes, using 5 as the basic length.  
+        <p><code>linkDistance(d3cola.symmetricDiffLinkLengths(5))</code> computes ideal lengths on each link to make extra space around high-degree nodes, using 5 as the basic length.  
     Alternately, you can pass your own function into linkDistance that returns a specific length for each link (e.g. based on your data).</p>
         <p>
             The <code>start()</code> method now includes up to three integer arguments.  In the example above, start will initially apply 10 iterations of layout with no constraints, 15 iterations with only structural (user-specified) constraints and 20 iterations of layout with all constraints including anti-overlap constraints.

diff --git a/WebCola/src/d3adaptor.js b/WebCola/src/d3adaptor.js
@@ -260,13 +260,17 @@ var cola;
             return d3adaptor;
         };
 
+        function setLinkLength(link, length) {
+            link.length = length;
+        }
+
         d3adaptor.symmetricDiffLinkLengths = function (idealLength, w) {
-            cola.symmetricDiffLinkLengths(this.nodes().length, links, getSourceIndex, getTargetIndex, w);
+            cola.symmetricDiffLinkLengths(this.nodes().length, links, getSourceIndex, getTargetIndex, setLinkLength, w);
             return function (l) { return idealLength * l.length };
         }
 
         d3adaptor.jaccardLinkLengths = function (idealLength, w) {
-            cola.jaccardLinkLengths(this.nodes().length, links, getSourceIndex, getTargetIndex, w);
+            cola.jaccardLinkLengths(this.nodes().length, links, getSourceIndex, getTargetIndex, setLinkLength, w);
             return function (l) { return idealLength * l.length };
         }