Skip to content

Commit

Permalink
network for alex
Browse files Browse the repository at this point in the history
  • Loading branch information
tgdwyer committed Apr 10, 2014
1 parent 48ce2e3 commit 233270c
Showing 1 changed file with 181 additions and 0 deletions.
181 changes: 181 additions & 0 deletions WebCola/examples/friendnetworks.html
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 233270c

Please sign in to comment.