From 233270c1a16cf449358693ecda1660ce4e32bd3c Mon Sep 17 00:00:00 2001
From: Tim Dwyer <tgdwyer@gmail.com>
Date: Fri, 11 Apr 2014 09:49:55 +1000
Subject: [PATCH] network for alex

---
 WebCola/examples/friendnetworks.html | 181 +++++++++++++++++++++++++++
 1 file changed, 181 insertions(+)
 create mode 100644 WebCola/examples/friendnetworks.html
diff --git a/WebCola/examples/friendnetworks.html b/WebCola/examples/friendnetworks.html
new file mode 100644
index 00000000..9ba261e1
--- /dev/null
+++ b/WebCola/examples/friendnetworks.html
@@ -0,0 +1,181 @@
+﻿<!DOCTYPE html>
+
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>Friend Networks</title>
+    <style>
+        
+@import url(../style.css);
+.node {
+  stroke: #fff;
+  stroke-width: 1.5px;
+}
+
+.link {
+  stroke: #999;
+  stroke-opacity: .8;
+}
+
+        #leftButton {
+            position: relative;
+            left: 0px;
+            top: 0px;
+            min-width: 70px;
+        }
+        #rightButton {
+            position: relative;
+            left: 300px;
+            top: 0px;
+            min-width: 70px;
+        }
+
+.logo {
+    text-align: left;
+    font-size: 20px;
+    opacity: 0.5;
+}
+
+</style>
+</head>
+<body>
+    <h1>Friend Networks</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>
+    var width = 280,
+        height = 280;
+
+    var color = d3.scale.category20();
+    var leftvisible = true;
+    function showhideleft() {
+        if (leftvisible) {
+            egosvg1.svg.transition().duration(1000).attr("opacity", 0);
+            leftvisible = false;
+            leftbutton.text("show");
+        } else {
+            egosvg1.svg.transition().duration(1000).attr("opacity", 1);
+            leftvisible = true;
+            leftbutton.text("hide");
+        }
+    }
+    var rightvisible = true;
+    function showhideright() {
+        if (rightvisible) {
+            egosvg2.svg.transition().duration(1000).attr("opacity", 0);
+            rightvisible = false;
+            rightbutton.text("show");
+        } else {
+            egosvg2.svg.transition().duration(1000).attr("opacity", 1);
+            rightvisible = true;
+            rightbutton.text("hide");
+        }
+    }
+
+    var body = d3.select("body");
+    var leftbutton = body.append("button").attr("id", "leftButton").html("hide").on("click", showhideleft);
+    var rightbutton = body.append("button").attr("id", "rightButton").html("hide").on("click", showhideright);
+    body.append("br");
+
+    var egosvg = (function () {
+        function egosvg(file, edgelength, gender) {
+            this.edgelength = edgelength;
+            this.gender = gender;
+            this.d3cola = cola.d3adaptor().convergenceThreshold(1e-4)
+                .size([width, height]);
+
+            this.svg = d3.select("body").append("svg")
+                .attr("width", width)
+                .attr("height", height);
+
+            this.edgegroup = this.svg.append("g");
+            this.nodegroup = this.svg.append("g");
+
+            this.edges = [];
+
+            var _this = this;
+
+            d3.text(file,
+                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 && i > j) {
+                                    _this.edges.push({ source: i, target: j });
+                                }
+                            });
+                        }
+                    });
+                    _this.loaded();
+                });
+        }
+
+        var regularTick = function (link, node) {
+            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; });
+        };
+
+        egosvg.prototype.loaded = function () {
+            var _this = this;
+            this.d3cola
+                .links(this.edges)
+                .linkDistance(this.d3cola.symmetricDiffLinkLengths(this.edgelength))
+                .start(30);
+
+            var nodes = this.d3cola.nodes();
+            nodes.forEach(function (v) { v.width = 20; v.height = 20; });
+
+            this.link = this.edgegroup.selectAll(".link")
+                .data(this.d3cola.links(), function (d) {
+                    return _this.d3cola.linkId(d);
+                });
+
+            this.link.enter().append("line")
+                .attr("class", "link")
+                .style("stroke-width", function (d) { return Math.sqrt(d.value); });
+
+
+            this.node = this.nodegroup.selectAll(".node")
+                .data(nodes)
+              .enter().append("circle")
+                .attr("class", "node")
+                .attr("r", function (d, i) { return 5 })
+                .style("fill", function (d, i) { return _this.gender[i] < 2 ? "#8e8ec7" : "#da5d2d" })
+                .call(this.d3cola.drag);
+
+            this.node.append("title")
+                .text(function (d) { return d.index; });
+
+            this.d3cola.on("tick", function () { regularTick(_this.link, _this.node) });
+            allDone();
+        };
+        return egosvg;
+    })();
+    var egosvg1, egosvg2;
+    
+    d3.text("graphdata/alex/Full_Network_Sym/gender.txt",
+        function (error, text) {
+            var gender = text.split('\n').map(function (s) { return Number(s.trim()) });
+            egosvg1 = new egosvg("graphdata/alex/Full_Network_Sym/acquaint_core.txt", 25, gender);
+            egosvg2 = new egosvg("graphdata/alex/Full_Network_Sym/closef_core.txt", 6, gender);
+        });
+
+    var counter = 0;
+    function allDone() {
+        if (++counter === 2)
+            body.append("p").html('<p class="logo">marvl.infotech.monash.edu</p>');
+            //body.append("p").html('<div class="logo"><img src="http://marvl.infotech.monash.edu.au/wp-content/themes/marvl/marvl.png" width="85px" alt="MArVL Logo" />  Monash Adaptive Visualization Lab</div>');
+    }
+</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>
