var Log = {
elem: false,
write: function(text){
if (!this.elem)
this.elem = document.getElementById('log');
this.elem.innerHTML = text;
this.elem.style.left = (900 - this.elem.offsetWidth / 2) + 'px';
} // was 500
};
function addEvent(obj, type, fn) {
if (obj.addEventListener) obj.addEventListener(type, fn, false);
else obj.attachEvent('on' + type, fn);
};
function init(){
//init data
//By defining properties with the dollar sign ($)
//in nodes and edges we can override the global configuration
//properties for nodes and edges.
//In this case we use "$type" and "$dim" properties to override
//the type of the node to be plotted and its dimension.
var json = [
/* starts basic tree node */
{
"id": "root",
"name": "MIGNET",
"data": {
"$dim": 32.26403873194912,
"attributes": "Articles in this category"
},
"adjacencies": [{
"nodeTo": "teams",
"data": {
"weight": 2
}
}],
},
/* end basic tree node */
/* starts basic tree node */
{
"id": "themes",
"name": "Themes",
"data": {
"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "15"
},
"adjacencies": [{
"nodeTo": "root",
"data": {
"weight": 2
}
}],
},
/* end basic tree node */
{
"id": "teams",
"name": "Teams",
"data": {
"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "4"
},
"adjacencies": [{
"nodeTo": "root",
"data": {
"weight": 2
}
}],
},
/* end basic tree node */
{
"id": "dissemination",
"name": "Dissemination",
"data": {
"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "26"
},
"adjacencies": [{
"nodeTo": "root",
"data": {
"weight": 2
}
}],
},
/* end basic tree node */
/* end basic tree node */
{
"id": "literature_review",
"name": "literature review",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "15"
},
"adjacencies": [{
"nodeTo": "themes",
"data": {
"weight": 2
},
},
{
"nodeTo": "panteion",
"data": {
"weight": 2
},
},
{
"nodeTo": "bologna",
"data": {
"weight": 2
},
},
{
"nodeTo": "utrecht",
"data": {
"weight": 2
},
},
{
"nodeTo": "hamburg",
"data": {
"weight": 2
},
},
{
"nodeTo": "Peace_Institute",
"data": {
"weight": 2
},
},
{
"nodeTo": "FMSH_Paris",
"data": {
"weight": 2
},
},
{
"nodeTo": "symfiliosi",
"data": {
"weight": 2
},
},
{
"nodeTo": "hull",
"data": {
"weight": 2
},
}
],
},
/* end basic tree node */
/* start basic tree node */
{
"id": "research_design",
"name": "research design",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "16"
},
"adjacencies": [{
"nodeTo": "themes",
"data": {
"weight": 2
}
},
{
"nodeTo": "panteion",
"data": {
"weight": 2
},
},
{
"nodeTo": "bologna",
"data": {
"weight": 2
},
},
{
"nodeTo": "utrecht",
"data": {
"weight": 2
},
},
{
"nodeTo": "hamburg",
"data": {
"weight": 2
},
},
{
"nodeTo": "Peace_Institute",
"data": {
"weight": 2
},
},
{
"nodeTo": "FMSH_Paris",
"data": {
"weight": 2
},
},
{
"nodeTo": "symfiliosi",
"data": {
"weight": 2
},
},
{
"nodeTo": "hull",
"data": {
"weight": 2
},
}
],
},
/* end basic tree node */
/* start basic tree node */
{
"id": "borde_crossings",
"name": "border crossings",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "5"
},
"adjacencies": [{
"nodeTo": "themes",
"data": {
"weight": 2
}
},
{
"nodeTo": "panteion",
"data": {
"weight": 2
}
},
{
"nodeTo": "bologna",
"data": {
"weight": 2
}
}
],
},
/* end basic tree node */
/* start basic tree node */
{
"id": "communication_flows",
"name": "communication flows",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "11"
},
"adjacencies": [{
"nodeTo": "themes",
"data": {
"weight": 2
}
},
{
"nodeTo": "panteion",
"data": {
"weight": 2
}
},
{
"nodeTo": "Peace_Institute",
"data": {
"weight": 2
}
},
{
"nodeTo": "FMSH_Paris",
"data": {
"weight": 2
}
}
],
},
/* end basic tree node */
/* start basic tree node */
{
"id": "religious_practices",
"name": "religious practices",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "8"
},
"adjacencies": [{
"nodeTo": "themes",
"data": {
"weight": 2
}
},
{
"nodeTo": "panteion",
"data": {
"weight": 2
}
},
{
"nodeTo": "utrecht",
"data": {
"weight": 2
}
},
{
"nodeTo": "hull",
"data": {
"weight": 2
}
}
],
},
/* end basic tree node */
/* start basic tree node */
{
"id": "education",
"name": "education",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "6",
},
"adjacencies": [{
"nodeTo": "themes",
"data": {
"weight": 2
}
},
{
"nodeTo": "bologna",
"data": {
"weight": 2
}
},
{
"nodeTo": "panteion",
"data": {
"weight": 2
}
},
{
"nodeTo": "utrecht",
"data": {
"weight": 2
}
}
],
},
{
"id": "sexualities",
"name": "sexualities",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "7"
},
"adjacencies": [{
"nodeTo": "themes",
"data": {
"weight": 2
}
},
{
"nodeTo": "panteion",
"data": {
"weight": 2
}
},
{
"nodeTo": "Peace_Institute",
"data": {
"weight": 2
}
},
{
"nodeTo": "FMSH_Paris",
"data": {
"weight": 2
}
}
],
},
/* end basic tree node */
/* start basic tree node */
{
"id": "social_movements",
"name": "social movements",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "9"
},
"adjacencies": [{
"nodeTo": "themes",
"data": {
"weight": 2
},
},
{
"nodeTo": "panteion",
"data": {
"weight": 2
},
},
{
"nodeTo": "symfiliosi",
"data": {
"weight": 2
},
},
{
"nodeTo": "hull",
"data": {
"weight": 2
},
}
],
},
/* end basic tree node */
/* start basic tree node */
{
"id": "conflict_dialogue",
"name": "conflict / dialogue",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "10"
},
"adjacencies": [{
"nodeTo": "themes",
"data": {
"weight": 2
}
},
{
"nodeTo": "panteion",
"data": {
"weight": 2
},
},
{
"nodeTo": "symfiliosi",
"data": {
"weight": 2
},
},
{
"nodeTo": "hull",
"data": {
"weight": 2
},
}
],
},
/* end basic tree node */
/* start teams nodes */
/* start basic tree node */
{
"id": "panteion",
"name": "panteion",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "18"
},
"adjacencies": [{
"nodeTo": "teams",
"data": {
"weight": 2
}
}]
/* end basic tree node */
},
/* start basic tree node */
{
"id": "bologna",
"name": "Bologna",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "17"
},
"adjacencies": [{
"nodeTo": "teams",
"data": {
"weight": 2
}
}]
},
/* end basic tree node */
/* start basic tree node */
{
"id": "utrecht",
"name": "utrecht",
"data": {
//"$dim": 32.26403873194912,
"attributes": "navigate Articles in this category",
"cat_id": "19"
},
"adjacencies": [{
"nodeTo": "teams",
"data": {
"weight": 2
}
}]
},
/* end basic tree node */
{
"id": "hamburg",
"name": "Hamburg",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "24"
},
"adjacencies": [{
"nodeTo": "teams",
"data": {
"weight": 2
}
}],
},
/*end teams nodes */
/* end basic tree node */
{
"id": "Peace_Institute",
"name": "Peace Institute",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "22"
},
"adjacencies": [{
"nodeTo": "teams",
"data": {
"weight": 100
}
}]
},
/*end teams nodes */
/* end basic tree node */
{
"id": "FMSH_Paris",
"name": "FMSH Paris",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "23"
},
"adjacencies": [{
"nodeTo": "teams",
"data": {
"weight": 2
}
}]
},
/*end teams nodes */
/* end basic tree node */
{
"id": "symfiliosi",
"name": "Symfiliosi",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "21"
},
"adjacencies": [{
"nodeTo": "teams",
"data": {
"weight": 2
}
}]
},
/*end teams nodes */
{
"id": "hull",
"name": "Hull",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "20"
},
"adjacencies": [{
"nodeTo": "teams",
"data": {
"weight": 2
}
}]
},
/*end teams nodes */
/*start dissemination nodes */
{
"id": "digital_platform",
"name": "Digital Platform",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "13"
},
"adjacencies": [{
"nodeTo": "dissemination",
"data": {
"weight": 2
}
}]
},
/* end dissemination nodes */
/*start dissemination nodes */
{
"id": "game",
"name": "Game",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "12"
},
"adjacencies": [{
"nodeTo": "dissemination",
"data": {
"weight": 2
}
}]
},
/* end dissemination nodes */
/* end dissemination nodes */
/*start dissemination nodes */
{
"id": "public_events",
"name": "Public Events",
"data": {
//"$dim": 32.26403873194912,
"attributes": "Articles in this category",
"cat_id": "28"
},
"adjacencies": [{
"nodeTo": "dissemination",
"data": {
"weight": 2
}
}],
"children": ["panteion"]
}
/* end dissemination nodes */
];
//end
var infovis = document.getElementById('infovis');
var w = infovis.offsetWidth, h = infovis.offsetHeight;
//init canvas
//Create a new canvas instance.
var canvas = new Canvas('mycanvas', {
'injectInto': 'infovis',
'width': 980,
'height': h,
//Optional: Add a background canvas
//that draws some concentric circles.
'backgroundCanvas': {
'styles': {
'strokeStyle': '#fff'
},
'impl': {
'init': function(){},
'plot': function(canvas, ctx){
var times = 6, d = 100;
var pi2 = Math.PI * 2;
for (var i = 1; i <= times; i++) {
ctx.beginPath();
ctx.arc(0, 0, i * d, 0, pi2, true);
ctx.stroke();
ctx.closePath();
}
}
}
}
});
//end
//init RGraph
var rgraph = new RGraph(canvas, {
//Nodes and Edges parameters
//can be overriden if defined in
//the JSON input data.
//This way we can define different node
//types individually.
Node: {
'overridable': true,
color: "#f00"
},
Edge: {
color: "#999999"
},
//Set polar interpolation.
//Default's linear.
interpolation: 'linear',
//Change the transition effect from linear
//to elastic.
transition: Trans.Quart.easeInOut,
//Change other animation parameters.
duration:3500,
fps: 30,
//Change father-child distance.
levelDistance: 200,
//This method is called right before plotting
//an edge. This method is useful to change edge styles
//individually.
onBeforePlotLine: function(adj){
//Add some random lineWidth to each edge.
if (!adj.data.$lineWidth)
adj.data.$lineWidth = Math.random() * 3 + 1;
},
// domElement.style.left = intX/10 + 'px';
onBeforeCompute: function(node){
Log.write("centering " + node.name + "...");
},
//Add node click handler and some styles.
//This method is called only once for each node/label crated.
onCreateLabel: function(domElement, node){
domElement.innerHTML = node.name;
domElement.onclick = function () {
rgraph.onClick(node.id, { hideLabels: false });
};
var style = domElement.style;
style.cursor = 'pointer';
style.fontSize = "0.8em";
style.color = "black";
},
//This method is called when rendering/moving a label.
//This is method is useful to make some last minute changes
//to node labels like adding some position offset.
onPlaceLabel: function(domElement, node){
var style = domElement.style;
style.display = '';
style.cursor = 'pointer';
var width = domElement.offsetWidth;
var intX = parseInt(domElement.style.left);
if (node._depth == 1) {
// domElement.style.left = intX/10 + 'px';
} else if(node._depth == 2){
// style.fontSize = "0.7em";
// style.color = "#555";
} else if(node._depth == 3){
//style.fontSize = "0.7em";
//style.color = "#555";
}
else if(node._depth == 0){
style.fontSize = "2.7em";
style.color = "#555";
} else {
style.display = 'none';
}
var left = parseInt(style.left);
var w = domElement.offsetWidth;
style.left = (left - w / 2) + 'px';
},
onAfterCompute: function(){
Log.write("done");
var node = Graph.Util.getClosestNodeToOrigin(rgraph.graph, "pos");
var html = "Category / Node : " + node.name + "
";
var attr = node.data.attributes;
//print once relation
html += "";
html += "";
html += "";
html += " " + attr + " >> ";
// end nodes info printing
// start connections printing //
html += " | ";
html += "";
html += " (relation: " + rel + ") ";
html += "" + child.name + "";
/* html += "(attr: " + cat + ") ";*/
});
//html += "";
html += "";
html += " | ";
html += "
";
html += "";
document.getElementById('inner-details').innerHTML = html;
}
});
//load graph.
rgraph.loadJSON(json, 1);
//compute positions and plot
rgraph.refresh();
//end
rgraph.controller.onBeforeCompute(rgraph.graph.getNode(rgraph.root));
rgraph.controller.onAfterCompute();
}