User:Shirkamisamyogai: Difference between revisions
From FrathWiki
Jump to navigationJump to search
mNo edit summary |
m (testing) |
||
Line 8: | Line 8: | ||
[[Konalkepota: Random words]] <br> | [[Konalkepota: Random words]] <br> | ||
[[Konalkepota: Counting]] <br> | [[Konalkepota: Counting]] <br> | ||
var labelType, useGradients, nativeTextSupport, animate; | |||
(function() { | |||
var ua = navigator.userAgent, | |||
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), | |||
typeOfCanvas = typeof HTMLCanvasElement, | |||
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), | |||
textSupport = nativeCanvasSupport | |||
&& (typeof document.createElement('canvas').getContext('2d').fillText == 'function'); | |||
//I'm setting this based on the fact that ExCanvas provides text support for IE | |||
//and that as of today iPhone/iPad current text support is lame | |||
labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML'; | |||
nativeTextSupport = labelType == 'Native'; | |||
useGradients = nativeCanvasSupport; | |||
animate = !(iStuff || !nativeCanvasSupport); | |||
})(); | |||
var Log = { | |||
elem: false, | |||
write: function(text){ | |||
if (!this.elem) | |||
this.elem = document.getElementById('log'); | |||
this.elem.innerHTML = text; | |||
this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px'; | |||
} | |||
}; | |||
function init(){ | |||
//init data | |||
var json = { | |||
id: "node02", | |||
name: "0.2", | |||
data: {}, | |||
children: [{ | |||
id: "node13", | |||
name: "1.3", | |||
data: {}, | |||
children: [{ | |||
id: "node24", | |||
name: "2.4", | |||
data: {}, | |||
children: [{ | |||
id: "node35", | |||
name: "3.5", | |||
data: {}, | |||
children: [{ | |||
id: "node46", | |||
name: "4.6", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node37", | |||
name: "3.7", | |||
data: {}, | |||
children: [{ | |||
id: "node48", | |||
name: "4.8", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node49", | |||
name: "4.9", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node410", | |||
name: "4.10", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node411", | |||
name: "4.11", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node312", | |||
name: "3.12", | |||
data: {}, | |||
children: [{ | |||
id: "node413", | |||
name: "4.13", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node314", | |||
name: "3.14", | |||
data: {}, | |||
children: [{ | |||
id: "node415", | |||
name: "4.15", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node416", | |||
name: "4.16", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node417", | |||
name: "4.17", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node418", | |||
name: "4.18", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node319", | |||
name: "3.19", | |||
data: {}, | |||
children: [{ | |||
id: "node420", | |||
name: "4.20", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node421", | |||
name: "4.21", | |||
data: {}, | |||
children: [] | |||
}] | |||
}] | |||
}, { | |||
id: "node222", | |||
name: "2.22", | |||
data: {}, | |||
children: [{ | |||
id: "node323", | |||
name: "3.23", | |||
data: {}, | |||
children: [{ | |||
id: "node424", | |||
name: "4.24", | |||
data: {}, | |||
children: [] | |||
}] | |||
}] | |||
}] | |||
}, { | |||
id: "node125", | |||
name: "1.25", | |||
data: {}, | |||
children: [{ | |||
id: "node226", | |||
name: "2.26", | |||
data: {}, | |||
children: [{ | |||
id: "node327", | |||
name: "3.27", | |||
data: {}, | |||
children: [{ | |||
id: "node428", | |||
name: "4.28", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node429", | |||
name: "4.29", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node330", | |||
name: "3.30", | |||
data: {}, | |||
children: [{ | |||
id: "node431", | |||
name: "4.31", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node332", | |||
name: "3.32", | |||
data: {}, | |||
children: [{ | |||
id: "node433", | |||
name: "4.33", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node434", | |||
name: "4.34", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node435", | |||
name: "4.35", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node436", | |||
name: "4.36", | |||
data: {}, | |||
children: [] | |||
}] | |||
}] | |||
}, { | |||
id: "node237", | |||
name: "2.37", | |||
data: {}, | |||
children: [{ | |||
id: "node338", | |||
name: "3.38", | |||
data: {}, | |||
children: [{ | |||
id: "node439", | |||
name: "4.39", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node440", | |||
name: "4.40", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node441", | |||
name: "4.41", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node342", | |||
name: "3.42", | |||
data: {}, | |||
children: [{ | |||
id: "node443", | |||
name: "4.43", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node344", | |||
name: "3.44", | |||
data: {}, | |||
children: [{ | |||
id: "node445", | |||
name: "4.45", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node446", | |||
name: "4.46", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node447", | |||
name: "4.47", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node348", | |||
name: "3.48", | |||
data: {}, | |||
children: [{ | |||
id: "node449", | |||
name: "4.49", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node450", | |||
name: "4.50", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node451", | |||
name: "4.51", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node452", | |||
name: "4.52", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node453", | |||
name: "4.53", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node354", | |||
name: "3.54", | |||
data: {}, | |||
children: [{ | |||
id: "node455", | |||
name: "4.55", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node456", | |||
name: "4.56", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node457", | |||
name: "4.57", | |||
data: {}, | |||
children: [] | |||
}] | |||
}] | |||
}, { | |||
id: "node258", | |||
name: "2.58", | |||
data: {}, | |||
children: [{ | |||
id: "node359", | |||
name: "3.59", | |||
data: {}, | |||
children: [{ | |||
id: "node460", | |||
name: "4.60", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node461", | |||
name: "4.61", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node462", | |||
name: "4.62", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node463", | |||
name: "4.63", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node464", | |||
name: "4.64", | |||
data: {}, | |||
children: [] | |||
}] | |||
}] | |||
}] | |||
}, { | |||
id: "node165", | |||
name: "1.65", | |||
data: {}, | |||
children: [{ | |||
id: "node266", | |||
name: "2.66", | |||
data: {}, | |||
children: [{ | |||
id: "node367", | |||
name: "3.67", | |||
data: {}, | |||
children: [{ | |||
id: "node468", | |||
name: "4.68", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node469", | |||
name: "4.69", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node470", | |||
name: "4.70", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node471", | |||
name: "4.71", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node372", | |||
name: "3.72", | |||
data: {}, | |||
children: [{ | |||
id: "node473", | |||
name: "4.73", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node474", | |||
name: "4.74", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node475", | |||
name: "4.75", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node476", | |||
name: "4.76", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node377", | |||
name: "3.77", | |||
data: {}, | |||
children: [{ | |||
id: "node478", | |||
name: "4.78", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node479", | |||
name: "4.79", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node380", | |||
name: "3.80", | |||
data: {}, | |||
children: [{ | |||
id: "node481", | |||
name: "4.81", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node482", | |||
name: "4.82", | |||
data: {}, | |||
children: [] | |||
}] | |||
}] | |||
}, { | |||
id: "node283", | |||
name: "2.83", | |||
data: {}, | |||
children: [{ | |||
id: "node384", | |||
name: "3.84", | |||
data: {}, | |||
children: [{ | |||
id: "node485", | |||
name: "4.85", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node386", | |||
name: "3.86", | |||
data: {}, | |||
children: [{ | |||
id: "node487", | |||
name: "4.87", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node488", | |||
name: "4.88", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node489", | |||
name: "4.89", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node490", | |||
name: "4.90", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node491", | |||
name: "4.91", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node392", | |||
name: "3.92", | |||
data: {}, | |||
children: [{ | |||
id: "node493", | |||
name: "4.93", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node494", | |||
name: "4.94", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node495", | |||
name: "4.95", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node496", | |||
name: "4.96", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node397", | |||
name: "3.97", | |||
data: {}, | |||
children: [{ | |||
id: "node498", | |||
name: "4.98", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node399", | |||
name: "3.99", | |||
data: {}, | |||
children: [{ | |||
id: "node4100", | |||
name: "4.100", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4101", | |||
name: "4.101", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4102", | |||
name: "4.102", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4103", | |||
name: "4.103", | |||
data: {}, | |||
children: [] | |||
}] | |||
}] | |||
}, { | |||
id: "node2104", | |||
name: "2.104", | |||
data: {}, | |||
children: [{ | |||
id: "node3105", | |||
name: "3.105", | |||
data: {}, | |||
children: [{ | |||
id: "node4106", | |||
name: "4.106", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4107", | |||
name: "4.107", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4108", | |||
name: "4.108", | |||
data: {}, | |||
children: [] | |||
}] | |||
}] | |||
}, { | |||
id: "node2109", | |||
name: "2.109", | |||
data: {}, | |||
children: [{ | |||
id: "node3110", | |||
name: "3.110", | |||
data: {}, | |||
children: [{ | |||
id: "node4111", | |||
name: "4.111", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4112", | |||
name: "4.112", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node3113", | |||
name: "3.113", | |||
data: {}, | |||
children: [{ | |||
id: "node4114", | |||
name: "4.114", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4115", | |||
name: "4.115", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4116", | |||
name: "4.116", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node3117", | |||
name: "3.117", | |||
data: {}, | |||
children: [{ | |||
id: "node4118", | |||
name: "4.118", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4119", | |||
name: "4.119", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4120", | |||
name: "4.120", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4121", | |||
name: "4.121", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node3122", | |||
name: "3.122", | |||
data: {}, | |||
children: [{ | |||
id: "node4123", | |||
name: "4.123", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4124", | |||
name: "4.124", | |||
data: {}, | |||
children: [] | |||
}] | |||
}] | |||
}, { | |||
id: "node2125", | |||
name: "2.125", | |||
data: {}, | |||
children: [{ | |||
id: "node3126", | |||
name: "3.126", | |||
data: {}, | |||
children: [{ | |||
id: "node4127", | |||
name: "4.127", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4128", | |||
name: "4.128", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4129", | |||
name: "4.129", | |||
data: {}, | |||
children: [] | |||
}] | |||
}] | |||
}] | |||
}, { | |||
id: "node1130", | |||
name: "1.130", | |||
data: {}, | |||
children: [{ | |||
id: "node2131", | |||
name: "2.131", | |||
data: {}, | |||
children: [{ | |||
id: "node3132", | |||
name: "3.132", | |||
data: {}, | |||
children: [{ | |||
id: "node4133", | |||
name: "4.133", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4134", | |||
name: "4.134", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4135", | |||
name: "4.135", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4136", | |||
name: "4.136", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4137", | |||
name: "4.137", | |||
data: {}, | |||
children: [] | |||
}] | |||
}] | |||
}, { | |||
id: "node2138", | |||
name: "2.138", | |||
data: {}, | |||
children: [{ | |||
id: "node3139", | |||
name: "3.139", | |||
data: {}, | |||
children: [{ | |||
id: "node4140", | |||
name: "4.140", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4141", | |||
name: "4.141", | |||
data: {}, | |||
children: [] | |||
}] | |||
}, { | |||
id: "node3142", | |||
name: "3.142", | |||
data: {}, | |||
children: [{ | |||
id: "node4143", | |||
name: "4.143", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4144", | |||
name: "4.144", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4145", | |||
name: "4.145", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4146", | |||
name: "4.146", | |||
data: {}, | |||
children: [] | |||
}, { | |||
id: "node4147", | |||
name: "4.147", | |||
data: {}, | |||
children: [] | |||
}] | |||
}] | |||
}] | |||
}] | |||
}; | |||
//preprocess subtrees orientation | |||
var arr = json.children, len = arr.length; | |||
for(var i=0; i < len; i++) { | |||
//split half left orientation | |||
if(i < len / 2) { | |||
arr[i].data.$orn = 'left'; | |||
$jit.json.each(arr[i], function(n) { | |||
n.data.$orn = 'left'; | |||
}); | |||
} else { | |||
//half right | |||
arr[i].data.$orn = 'right'; | |||
$jit.json.each(arr[i], function(n) { | |||
n.data.$orn = 'right'; | |||
}); | |||
} | |||
} | |||
//end | |||
//grab radio button | |||
var normal = $jit.id('s-normal'); | |||
//init Spacetree | |||
//Create a new ST instance | |||
var st = new $jit.ST({ | |||
//id of viz container element | |||
injectInto: 'infovis', | |||
//multitree | |||
multitree: true, | |||
//set duration for the animation | |||
duration: 800, | |||
//set animation transition type | |||
transition: $jit.Trans.Quart.easeInOut, | |||
//set distance between node and its children | |||
levelDistance: 40, | |||
//sibling and subtrees offsets | |||
siblingOffset: 3, | |||
subtreeOffset: 3, | |||
//set node and edge styles | |||
//set overridable=true for styling individual | |||
//nodes or edges | |||
Node: { | |||
height: 35, | |||
width: 50, | |||
type: 'ellipse', | |||
color: '#aaa', | |||
overridable: true, | |||
//set canvas specific styles | |||
//like shadows | |||
CanvasStyles: { | |||
shadowColor: '#ccc', | |||
shadowBlur: 10 | |||
} | |||
}, | |||
Edge: { | |||
type: 'line', | |||
overridable: true | |||
}, | |||
onBeforeCompute: function(node){ | |||
Log.write("loading " + node.name); | |||
}, | |||
onAfterCompute: function(){ | |||
Log.write("done"); | |||
}, | |||
//This method is called on DOM label creation. | |||
//Use this method to add event handlers and styles to | |||
//your node. | |||
onCreateLabel: function(label, node){ | |||
label.id = node.id; | |||
label.innerHTML = node.name; | |||
label.onclick = function(){ | |||
if(normal.checked) { | |||
st.onClick(node.id); | |||
} else { | |||
st.setRoot(node.id, 'animate'); | |||
} | |||
}; | |||
//set label styles | |||
var style = label.style; | |||
style.width = 50 + 'px'; | |||
style.height = 35 + 'px'; | |||
style.cursor = 'pointer'; | |||
style.color = '#333'; | |||
style.fontSize = '0.8em'; | |||
style.textAlign= 'center'; | |||
style.paddingTop = '10px'; | |||
}, | |||
//This method is called right before plotting | |||
//a node. It's useful for changing an individual node | |||
//style properties before plotting it. | |||
//The data properties prefixed with a dollar | |||
//sign will override the global node style properties. | |||
onBeforePlotNode: function(node){ | |||
//add some color to the nodes in the path between the | |||
//root node and the selected node. | |||
if (node.selected) { | |||
node.data.$color = "#ff7"; | |||
} | |||
else { | |||
delete node.data.$color; | |||
//if the node belongs to the last plotted level | |||
if(!node.anySubnode("exist")) { | |||
//count children number | |||
var count = 0; | |||
node.eachSubnode(function(n) { count++; }); | |||
//assign a node color based on | |||
//how many children it has | |||
node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count]; | |||
} | |||
} | |||
}, | |||
//This method is called right before plotting | |||
//an edge. It's useful for changing an individual edge | |||
//style properties before plotting it. | |||
//Edge data proprties prefixed with a dollar sign will | |||
//override the Edge global style properties. | |||
onBeforePlotLine: function(adj){ | |||
if (adj.nodeFrom.selected && adj.nodeTo.selected) { | |||
adj.data.$color = "#eed"; | |||
adj.data.$lineWidth = 3; | |||
} | |||
else { | |||
delete adj.data.$color; | |||
delete adj.data.$lineWidth; | |||
} | |||
} | |||
}); | |||
//load json data | |||
st.loadJSON(json); | |||
//compute node positions and layout | |||
st.compute('end'); | |||
st.select(st.root); | |||
//end | |||
} |
Revision as of 17:45, 8 January 2013
Hello, all. This page is meant to searve as a sounding board for my as yet uncreated conculture, conworld, and conlang.
I have been searching and searching for Dr. Zahir's Ethnographical Questionnaire, and have finally found it. Hooray!
Konalkepota: Dr. Zahir's Ethnographical Questionnaire
Konalkepota: Random words
Konalkepota: Counting
var labelType, useGradients, nativeTextSupport, animate;
(function() {
var ua = navigator.userAgent, iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), typeOfCanvas = typeof HTMLCanvasElement, nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), textSupport = nativeCanvasSupport && (typeof document.createElement('canvas').getContext('2d').fillText == 'function'); //I'm setting this based on the fact that ExCanvas provides text support for IE //and that as of today iPhone/iPad current text support is lame labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML'; nativeTextSupport = labelType == 'Native'; useGradients = nativeCanvasSupport; animate = !(iStuff || !nativeCanvasSupport);
})();
var Log = {
elem: false, write: function(text){ if (!this.elem) this.elem = document.getElementById('log'); this.elem.innerHTML = text; this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px'; }
};
function init(){
//init data var json = { id: "node02", name: "0.2", data: {}, children: [{ id: "node13", name: "1.3", data: {}, children: [{ id: "node24", name: "2.4", data: {}, children: [{ id: "node35", name: "3.5", data: {}, children: [{ id: "node46", name: "4.6", data: {}, children: [] }] }, { id: "node37", name: "3.7", data: {}, children: [{ id: "node48", name: "4.8", data: {}, children: [] }, { id: "node49", name: "4.9", data: {}, children: [] }, { id: "node410", name: "4.10", data: {}, children: [] }, { id: "node411", name: "4.11", data: {}, children: [] }] }, { id: "node312", name: "3.12", data: {}, children: [{ id: "node413", name: "4.13", data: {}, children: [] }] }, { id: "node314", name: "3.14", data: {}, children: [{ id: "node415", name: "4.15", data: {}, children: [] }, { id: "node416", name: "4.16", data: {}, children: [] }, { id: "node417", name: "4.17", data: {}, children: [] }, { id: "node418", name: "4.18", data: {}, children: [] }] }, { id: "node319", name: "3.19", data: {}, children: [{ id: "node420", name: "4.20", data: {}, children: [] }, { id: "node421", name: "4.21", data: {}, children: [] }] }] }, { id: "node222", name: "2.22", data: {}, children: [{ id: "node323", name: "3.23", data: {}, children: [{ id: "node424", name: "4.24", data: {}, children: [] }] }] }] }, { id: "node125", name: "1.25", data: {}, children: [{ id: "node226", name: "2.26", data: {}, children: [{ id: "node327", name: "3.27", data: {}, children: [{ id: "node428", name: "4.28", data: {}, children: [] }, { id: "node429", name: "4.29", data: {}, children: [] }] }, { id: "node330", name: "3.30", data: {}, children: [{ id: "node431", name: "4.31", data: {}, children: [] }] }, { id: "node332", name: "3.32", data: {}, children: [{ id: "node433", name: "4.33", data: {}, children: [] }, { id: "node434", name: "4.34", data: {}, children: [] }, { id: "node435", name: "4.35", data: {}, children: [] }, { id: "node436", name: "4.36", data: {}, children: [] }] }] }, { id: "node237", name: "2.37", data: {}, children: [{ id: "node338", name: "3.38", data: {}, children: [{ id: "node439", name: "4.39", data: {}, children: [] }, { id: "node440", name: "4.40", data: {}, children: [] }, { id: "node441", name: "4.41", data: {}, children: [] }] }, { id: "node342", name: "3.42", data: {}, children: [{ id: "node443", name: "4.43", data: {}, children: [] }] }, { id: "node344", name: "3.44", data: {}, children: [{ id: "node445", name: "4.45", data: {}, children: [] }, { id: "node446", name: "4.46", data: {}, children: [] }, { id: "node447", name: "4.47", data: {}, children: [] }] }, { id: "node348", name: "3.48", data: {}, children: [{ id: "node449", name: "4.49", data: {}, children: [] }, { id: "node450", name: "4.50", data: {}, children: [] }, { id: "node451", name: "4.51", data: {}, children: [] }, { id: "node452", name: "4.52", data: {}, children: [] }, { id: "node453", name: "4.53", data: {}, children: [] }] }, { id: "node354", name: "3.54", data: {}, children: [{ id: "node455", name: "4.55", data: {}, children: [] }, { id: "node456", name: "4.56", data: {}, children: [] }, { id: "node457", name: "4.57", data: {}, children: [] }] }] }, { id: "node258", name: "2.58", data: {}, children: [{ id: "node359", name: "3.59", data: {}, children: [{ id: "node460", name: "4.60", data: {}, children: [] }, { id: "node461", name: "4.61", data: {}, children: [] }, { id: "node462", name: "4.62", data: {}, children: [] }, { id: "node463", name: "4.63", data: {}, children: [] }, { id: "node464", name: "4.64", data: {}, children: [] }] }] }] }, { id: "node165", name: "1.65", data: {}, children: [{ id: "node266", name: "2.66", data: {}, children: [{ id: "node367", name: "3.67", data: {}, children: [{ id: "node468", name: "4.68", data: {}, children: [] }, { id: "node469", name: "4.69", data: {}, children: [] }, { id: "node470", name: "4.70", data: {}, children: [] }, { id: "node471", name: "4.71", data: {}, children: [] }] }, { id: "node372", name: "3.72", data: {}, children: [{ id: "node473", name: "4.73", data: {}, children: [] }, { id: "node474", name: "4.74", data: {}, children: [] }, { id: "node475", name: "4.75", data: {}, children: [] }, { id: "node476", name: "4.76", data: {}, children: [] }] }, { id: "node377", name: "3.77", data: {}, children: [{ id: "node478", name: "4.78", data: {}, children: [] }, { id: "node479", name: "4.79", data: {}, children: [] }] }, { id: "node380", name: "3.80", data: {}, children: [{ id: "node481", name: "4.81", data: {}, children: [] }, { id: "node482", name: "4.82", data: {}, children: [] }] }] }, { id: "node283", name: "2.83", data: {}, children: [{ id: "node384", name: "3.84", data: {}, children: [{ id: "node485", name: "4.85", data: {}, children: [] }] }, { id: "node386", name: "3.86", data: {}, children: [{ id: "node487", name: "4.87", data: {}, children: [] }, { id: "node488", name: "4.88", data: {}, children: [] }, { id: "node489", name: "4.89", data: {}, children: [] }, { id: "node490", name: "4.90", data: {}, children: [] }, { id: "node491", name: "4.91", data: {}, children: [] }] }, { id: "node392", name: "3.92", data: {}, children: [{ id: "node493", name: "4.93", data: {}, children: [] }, { id: "node494", name: "4.94", data: {}, children: [] }, { id: "node495", name: "4.95", data: {}, children: [] }, { id: "node496", name: "4.96", data: {}, children: [] }] }, { id: "node397", name: "3.97", data: {}, children: [{ id: "node498", name: "4.98", data: {}, children: [] }] }, { id: "node399", name: "3.99", data: {}, children: [{ id: "node4100", name: "4.100", data: {}, children: [] }, { id: "node4101", name: "4.101", data: {}, children: [] }, { id: "node4102", name: "4.102", data: {}, children: [] }, { id: "node4103", name: "4.103", data: {}, children: [] }] }] }, { id: "node2104", name: "2.104", data: {}, children: [{ id: "node3105", name: "3.105", data: {}, children: [{ id: "node4106", name: "4.106", data: {}, children: [] }, { id: "node4107", name: "4.107", data: {}, children: [] }, { id: "node4108", name: "4.108", data: {}, children: [] }] }] }, { id: "node2109", name: "2.109", data: {}, children: [{ id: "node3110", name: "3.110", data: {}, children: [{ id: "node4111", name: "4.111", data: {}, children: [] }, { id: "node4112", name: "4.112", data: {}, children: [] }] }, { id: "node3113", name: "3.113", data: {}, children: [{ id: "node4114", name: "4.114", data: {}, children: [] }, { id: "node4115", name: "4.115", data: {}, children: [] }, { id: "node4116", name: "4.116", data: {}, children: [] }] }, { id: "node3117", name: "3.117", data: {}, children: [{ id: "node4118", name: "4.118", data: {}, children: [] }, { id: "node4119", name: "4.119", data: {}, children: [] }, { id: "node4120", name: "4.120", data: {}, children: [] }, { id: "node4121", name: "4.121", data: {}, children: [] }] }, { id: "node3122", name: "3.122", data: {}, children: [{ id: "node4123", name: "4.123", data: {}, children: [] }, { id: "node4124", name: "4.124", data: {}, children: [] }] }] }, { id: "node2125", name: "2.125", data: {}, children: [{ id: "node3126", name: "3.126", data: {}, children: [{ id: "node4127", name: "4.127", data: {}, children: [] }, { id: "node4128", name: "4.128", data: {}, children: [] }, { id: "node4129", name: "4.129", data: {}, children: [] }] }] }] }, { id: "node1130", name: "1.130", data: {}, children: [{ id: "node2131", name: "2.131", data: {}, children: [{ id: "node3132", name: "3.132", data: {}, children: [{ id: "node4133", name: "4.133", data: {}, children: [] }, { id: "node4134", name: "4.134", data: {}, children: [] }, { id: "node4135", name: "4.135", data: {}, children: [] }, { id: "node4136", name: "4.136", data: {}, children: [] }, { id: "node4137", name: "4.137", data: {}, children: [] }] }] }, { id: "node2138", name: "2.138", data: {}, children: [{ id: "node3139", name: "3.139", data: {}, children: [{ id: "node4140", name: "4.140", data: {}, children: [] }, { id: "node4141", name: "4.141", data: {}, children: [] }] }, { id: "node3142", name: "3.142", data: {}, children: [{ id: "node4143", name: "4.143", data: {}, children: [] }, { id: "node4144", name: "4.144", data: {}, children: [] }, { id: "node4145", name: "4.145", data: {}, children: [] }, { id: "node4146", name: "4.146", data: {}, children: [] }, { id: "node4147", name: "4.147", data: {}, children: [] }] }] }] }] }; //preprocess subtrees orientation var arr = json.children, len = arr.length; for(var i=0; i < len; i++) { //split half left orientation if(i < len / 2) { arr[i].data.$orn = 'left'; $jit.json.each(arr[i], function(n) { n.data.$orn = 'left'; }); } else { //half right arr[i].data.$orn = 'right'; $jit.json.each(arr[i], function(n) { n.data.$orn = 'right'; }); } } //end //grab radio button var normal = $jit.id('s-normal'); //init Spacetree //Create a new ST instance var st = new $jit.ST({ //id of viz container element injectInto: 'infovis', //multitree multitree: true, //set duration for the animation duration: 800, //set animation transition type transition: $jit.Trans.Quart.easeInOut, //set distance between node and its children levelDistance: 40, //sibling and subtrees offsets siblingOffset: 3, subtreeOffset: 3, //set node and edge styles //set overridable=true for styling individual //nodes or edges Node: { height: 35, width: 50, type: 'ellipse', color: '#aaa', overridable: true, //set canvas specific styles //like shadows CanvasStyles: { shadowColor: '#ccc', shadowBlur: 10 } }, Edge: { type: 'line', overridable: true }, onBeforeCompute: function(node){ Log.write("loading " + node.name); }, onAfterCompute: function(){ Log.write("done"); }, //This method is called on DOM label creation. //Use this method to add event handlers and styles to //your node. onCreateLabel: function(label, node){ label.id = node.id; label.innerHTML = node.name; label.onclick = function(){ if(normal.checked) { st.onClick(node.id); } else { st.setRoot(node.id, 'animate'); } }; //set label styles var style = label.style; style.width = 50 + 'px'; style.height = 35 + 'px'; style.cursor = 'pointer'; style.color = '#333'; style.fontSize = '0.8em'; style.textAlign= 'center'; style.paddingTop = '10px'; }, //This method is called right before plotting //a node. It's useful for changing an individual node //style properties before plotting it. //The data properties prefixed with a dollar //sign will override the global node style properties. onBeforePlotNode: function(node){ //add some color to the nodes in the path between the //root node and the selected node. if (node.selected) { node.data.$color = "#ff7"; } else { delete node.data.$color; //if the node belongs to the last plotted level if(!node.anySubnode("exist")) { //count children number var count = 0; node.eachSubnode(function(n) { count++; }); //assign a node color based on //how many children it has node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count]; } } }, //This method is called right before plotting //an edge. It's useful for changing an individual edge //style properties before plotting it. //Edge data proprties prefixed with a dollar sign will //override the Edge global style properties. onBeforePlotLine: function(adj){ if (adj.nodeFrom.selected && adj.nodeTo.selected) { adj.data.$color = "#eed"; adj.data.$lineWidth = 3; } else { delete adj.data.$color; delete adj.data.$lineWidth; } } }); //load json data st.loadJSON(json); //compute node positions and layout st.compute('end'); st.select(st.root); //end
}