function init() {
var json =
{"id":"node00", "name":"conichi wa",
"data":[{"key":"key1","value":""},{"key":"key2","value": ""}],
"children":
[
{"id":"node90","name":"NATIVE INSTRUMENTS",
"data":[{"key":"key1","value": "Sceendesign 2006-09"},{"key":"key2","value":"» Native Instruments"}],
"children":
[]},
{"id":"node80","name":"COLLABORATIONS",
"data":[{"key":"key1","value":"network"},{"key":"key2","value":""}],
"children":
[
{"id":"node800","name":"Heart Chamber Orchestra",
"data":[{"key":"key1","value": "audiovisual performance"},{"key":"key2","value": "» Heart Chamber Orchestra"}],
"children":[]},
{"id":"node801","name":"Philtre",
"data":[{"key":"key1","value": "Dj Lao Wu"},{"key":"key2","value": "» Philtre"}],
"children":[]},
{"id":"node802","name":"Ephigenia",
"data":[{"key":"key1","value": "design & programming"},{"key":"key2","value": "» Ephigenia"}],
"children":[]},
{"id":"node803","name":"Anke Eckardt",
"data":[{"key":"key1","value": "music & installation"},{"key":"key2","value": "» AE"}],
"children":[]},
{"id":"node804","name":"Leeza5",
"data":[{"key":"key1","value": "fashion"},{"key":"key2","value": "» Leeza5"}],
"children":[]},
{"id":"node805","name":"Mokik",
"data":[{"key":"key1","value": "design & wearable"},{"key":"key2","value": "» Mokik"}],
"children":[]},
{"id":"node806","name":"Vektorfarm",
"data":[{"key":"key1","value": "design"},{"key":"key2","value": "» Vektorfarm"}],
"children":[]},
{"id":"node807","name":"emerging properties",
"data":[{"key":"key1","value": "poetry performance"},{"key":"key2","value": "» emerging properties"}],
"children":[]},
{"id":"node808","name":"Sonja Bender",
"data":[{"key":"key1","value": "video"},{"key":"key2","value": "» Sonja Bender"}],
"children":[]},
{"id":"node809","name":"Mirja Schellbach",
"data":[{"key":"key1","value": "photography"},{"key":"key2","value": "» Mirja Schellbach"}],
"children":[]},
{"id":"node810","name":"Sansculotte",
"data":[{"key":"key1","value": "design & programming"},{"key":"key2","value": "» Sansculotte"}],
"children":[]}
]},
{"id":"node70","name":"INTERNSHIP",
"data":[{"key":"key1","value":"1997-2001"},{"key":"key2","value":""}],
"children":
[
{"id":"node71","name":"Meta Design",
"data":[{"key":"key1","value": "online team"},{"key":"key2","value": "» Meta Design"}],
"children":
[
{"id":"node7100","name":"Kora Kimpel",
"data":[{"key":"key1","value": "design"},{"key":"key2","value": "» Kora Kimpel"}],
"children":[]},
{"id":"node7101","name":"Marc Bachhofen",
"data":[{"key":"key1","value": "design"},{"key":"key2","value": "» Marc Bachhofen"}],
"children":[]},
{"id":"node7102","name":"Rikus Hillmann",
"data":[{"key":"key1","value": "design"},{"key":"key2","value": "» Rikus Hillmann"}],
"children":[]}
]},
{"id":"node72","name":"Pixelpark",
"data":[{"key":"key1","value": "interactiv environments"},{"key":"key2","value": ""}],
"children":
[
{"id":"node7200","name":"Bernhard Kehrer",
"data":[{"key":"key1","value": "concept"},{"key":"key2","value": "» studio klv"}],
"children":[]},
{"id":"node7201","name":"Simon Schiessel",
"data":[{"key":"key1","value": "concept intership"},{"key":"key2","value": ""}],
"children":[]},
{"id":"node7202","name":"Sven Ehmann",
"data":[{"key":"key1","value": "concept"},{"key":"key2","value": ""}],
"children":[]}
]},
{"id":"node73","name":"Workshop fifty fifty, BCN ",
"data":[{"key":"key1","value": "with Jasch"},{"key":"key2","value": "» jasch"}],
"children":
[]}
]},
{"id":"node60","name":"STUDY.1996-2001",
"data":[{"key":"key1","value":"visuelle Kommunikation | UdK, Berlin"},{"key":"key2","value":"» UDK"}],
"children":
[
{"id":"node61","name":"Faculty",
"data":[{"key":"key1","value": "Gestalten mit digitalen Medien"},{"key":"key2","value": "» digital class"}],
"children":
[
{"id":"node6100","name":"Prof. J. Sauter",
"data":[{"key":"key1","value": "digital media class"},{"key":"key2","value": "» Prof. J. Sauter"}],
"children":[]},
{"id":"node6101","name":"Prof. R. Berger",
"data":[{"key":"key1","value": "theory"},{"key":"key2","value": "» Prof. R. Berger"}],
"children":[]},
{"id":"node6102","name":"Kirsten Johannsen",
"data":[{"key":"key1","value": "video art"},{"key":"key2","value": "» Kirsten Johannsen"}],
"children":[]},
{"id":"node6103","name":"Axel Roch",
"data":[{"key":"key1","value": "theory, HU"},{"key":"key2","value": "» Axel Roch"}],
"children":[]},
{"id":"node6104","name":"Tim Pritlove",
"data":[{"key":"key1","value": "ccc"},{"key":"key2","value": "» Tim Pritlove"}],
"children":[]},
{"id":"node6105","name":"Dominik Busch",
"data":[{"key":"key1","value": "art & programming"},{"key":"key2","value": "» Dominik Busch"}],
"children":[]},
{"id":"node6106","name":"KH Jeron",
"data":[{"key":"key1","value": "netart"},{"key":"key2","value": "» KH Jeron"}],
"children":[]}
]},
{"id":"node62","name":"Students",
"data":[{"key":"key1","value": "relevant people"},{"key":"key2","value": ""}],
"children":
[
{"id":"node6200","name":"Gregor Blahak",
"data":[{"key":"key1","value": "design & programming"},{"key":"key2","value": "» Gregor Blahak"}],
"children":[]},
{"id":"node6201","name":"Natascha Schuler",
"data":[{"key":"key1","value": "design"},{"key":"key2","value": "» Natascha Schuler"}],
"children":[]},
{"id":"node6202","name":"Stephan Huber",
"data":[{"key":"key1","value": "design & programming"},{"key":"key2","value": "» Stephan Huber"}],
"children":[]},
{"id":"node6203","name":"Lars Grau",
"data":[{"key":"key1","value": "product design"},{"key":"key2","value": "» Lars Grau"}],
"children":[]},
{"id":"node6204","name":"Patrick Palucki",
"data":[{"key":"key1","value": "video"},{"key":"key2","value": "www.patrickpalucki.de\">Patrick Palucki"}],
"children":[]},
{"id":"node6205","name":"Simone Gilges",
"data":[{"key":"key1","value": "photography"},{"key":"key2","value": "» Simone Gilges"}],
"children":[]},
{"id":"node6206","name":"Nicole Bednarzyk",
"data":[{"key":"key1","value": "design"},{"key":"key2","value": "» schöner wärs"}],
"children":[]}
]},
{"id":"node63","name":"Uni related",
"data":[{"key":"key1","value": "work"},{"key":"key2","value": ""}],
"children":
[
{"id":"node6300","name":"Tutor",
"data":[{"key":"key1","value": "1999-2001"},{"key":"key2","value": "» digital class"}],
"children":[]},
{"id":"node6301","name":"Designtransfer",
"data":[{"key":"key1","value": "1997-1999"},{"key":"key2","value": "» Designtransfer"}],
"children":[]},
]},]},
{"id":"node50","name":"STIPEND",
"data":[{"key":"key1","value":"2004-05"},{"key":"key2","value":"» NaFöG-Stipendium"}],
"children":
[]} ,
{"id":"node40","name":"VIDEO PRODUCTION",
"data":[{"key":"key1","value":"HD"},{"key":"key2","value":""}],
"children":
[
{"id":"node400","name":"IF produção",
"data":[{"key":"key1","value": "grassroot cultur"},{"key":"key2","value": "» IF produção"}],
"children":[]}
]},
/***************************************************************************************/
{"id":"node30","name":"COMPUTATIONAL ART",
"data":[{"key":"key1","value": "as of 2001"},{"key":"key2","value":""}],
"children":
[
{"id":"node300","name":"superpositioners",
"data":[{"key":"key1","value": "collective"}, {"key":"key2","value": "» superpositioners"}],
"children":[]}
]},
{"id":"node10","name":"AGENCIES",
"data":[{"key":"key1","value": "as of 2001"},{"key":"key2","value":""}],
"children":
[
{"id":"node103","name":"elementar",
"data":[{"key":"key1","value": "mediadesign"}, {"key":"key2","value": "» elementar"}],
"children":[]},
{"id":"node102","name":"Meta Design",
"data":[{"key":"key1","value": "design"}, {"key":"key2","value": "» Meta Design"}],
"children":[]},
{"id":"node101","name":"Kogag AG",
"data":[{"key":"key1","value": "eventdesign"}, {"key":"key2","value": "» Kogag"}],
"children":[]},
{"id":"node100","name":"Realities:United",
"data":[{"key":"key1","value": "media & architecture"}, {"key":"key2","value": "» Realities:United"}],
"children":[]}
]}
]
};
//the json structure mentioned above...
//Create a new canvas instance.
var canvas= new Canvas('infovis', '#000', '#000');
var ht= new Hypertree(canvas, {
onCreateLabel: function(domElement, node) {
$(domElement).set('html', node.name ).addEvents({
//Call the "onclick" method from
//the hypertree to move the hypertree
//correspondingly.
//This method takes the native event object.
//Since Mootools uses a wrapper for this
//event, I have to put e.event to get the
//native event object.
'click': function(e) {
ht.onClick(e.event);
var i = document.getElementById("myBox");
/* i.innerHTML = "" + node.name + "
"; */
i.innerHTML = "" + node.data[0].value + "
" + node.data[1].value + "";
}
});
},
onPlaceLabel: function(tag, node) {
var width = tag.offsetWidth;
var intX = tag.style.left.toInt();
intX -= width/2;
tag.style.left = intX + 'px';
}
});
ht.loadTreeFromJSON(json);
ht.compute();
ht.plot();
ht.prepareCanvasEvents();
}