forked from tgdwyer/WebCola
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
181 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |