User:Ketil3/jit/Spacetree1.js

// assumes loading of jit.js and Spacetree.css

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: [] }]               }]            }]        }]    };    //end //init Spacetree //Create a new ST instance var st = new $jit.ST({       //id of viz container element        injectInto: 'infovis',        //set duration for the animation        duration: 800,        //set animation transition type        transition: $jit.Trans.Quart.easeInOut,        //set distance between node and its children        levelDistance: 50,        //enable panning        Navigation: {          enable:true,          panning:true        },        //set node and edge styles        //set overridable=true for styling individual        //nodes or edges        Node: {            height: 20,            width: 60,            type: 'rectangle',            color: '#aaa',            overridable: true        },        Edge: {            type: 'bezier',            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 = 60 + 'px'; style.height = 17 + 'px'; style.cursor = 'pointer'; style.color = '#333'; style.fontSize = '0.8em'; style.textAlign= 'center'; style.paddingTop = '3px'; },       //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;    //optional: make a translation of the tree    st.geom.translate(new $jit.Complex(-200, 0), "current");    //emulate a click on the root node.    st.onClick(st.root);    //end    //Add event handlers to switch spacetree orientation.    var top = $jit.id('r-top'),         left = $jit.id('r-left'),         bottom = $jit.id('r-bottom'),         right = $jit.id('r-right'),        normal = $jit.id('s-normal');    function changeHandler {        if(this.checked) {            top.disabled = bottom.disabled = right.disabled = left.disabled = true;            st.switchPosition(this.value, "animate", { onComplete: function{ top.disabled = bottom.disabled = right.disabled = left.disabled = false; }           });        }    };    top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;    //end

}