|
|
| Line 5: |
Line 5: |
| | <link type="text/css" href="sunburstcss?action=raw" rel="stylesheet" /> | | <link type="text/css" href="sunburstcss?action=raw" rel="stylesheet" /> |
| | <script type="text/javascript" src="toolscripts?action=raw"></script> | | <script type="text/javascript" src="toolscripts?action=raw"></script> |
| - | <script type="text/javascript"> | + | <script type="text/javascript" arc="jit?action=raw"></script |
| - | 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 visualization(number){
| + | |
| - | document.write(number)
| + | |
| - | $('#readout').empty()
| + | |
| - | $('#inner-details').empty()
| + | |
| - | $('#infovis').empty()
| + | |
| - | json = JSON.parse(unescape($(':input[name=json'+number+']').val()))
| + | |
| - | //init data
| + | |
| - | //init Sunburst
| + | |
| - | var sb = new $jit.Sunburst({
| + | |
| - | //id container for the visualization
| + | |
| - | injectInto: 'infovis',
| + | |
| - | //Distance between levels
| + | |
| - | levelDistance: 90,
| + | |
| - | //Change node and edge styles such as
| + | |
| - | //color, width and dimensions.
| + | |
| - | Node: {
| + | |
| - | overridable: true,
| + | |
| - | type: useGradients? 'gradient-multipie' : 'multipie'
| + | |
| - | },
| + | |
| - | //Select canvas labels
| + | |
| - | //'HTML', 'SVG' and 'Native' are possible options
| + | |
| - | Label: {
| + | |
| - | type: labelType
| + | |
| - | },
| + | |
| - | //Change styles when hovering and clicking nodes
| + | |
| - | NodeStyles: {
| + | |
| - | enable: true,
| + | |
| - | type: 'Native',
| + | |
| - | stylesClick: {
| + | |
| - | 'color': '#000000'
| + | |
| - | },
| + | |
| - | },
| + | |
| - | //Add tooltips
| + | |
| - | Tips: {
| + | |
| - | enable: true,
| + | |
| - | onShow: function(tip, node) {
| + | |
| - | var html = "<div class=\"tip-title\">" + node.data.description + "</div>";
| + | |
| - | var data = node.data;
| + | |
| - | if("length" in data) {
| + | |
| - | html += "<b>Length of feature:</b> " + data.length + "bp";
| + | |
| - | }
| + | |
| - | if("type" in data){
| + | |
| - | html += "<br\><b>Type of feature:</b> " + data.type;
| + | |
| - | }
| + | |
| - | tip.innerHTML = html;
| + | |
| - | }
| + | |
| - | },
| + | |
| - | //implement event handlers
| + | |
| - | Events: {
| + | |
| - | enable: true,
| + | |
| - | onClick: function(node) {
| + | |
| - | if(!node) return;
| + | |
| - | //Build detailed information about the file/folder
| + | |
| - | //and place it in the right column.
| + | |
| - | var html = "<h4>" + node.name + "</h4>", data = node.data;
| + | |
| - | if("dna" in data) {
| + | |
| - | html += "<b>Sequence:</b><br /><pre>" + data.dna + "</pre>";
| + | |
| - | }
| + | |
| - | $jit.id('inner-details').innerHTML = html;
| + | |
| - | //hide tip
| + | |
| - | sb.tips.hide();
| + | |
| - | //rotate
| + | |
| - | //sb.rotate(node, animate? 'animate' : 'replot', {
| + | |
| - | //duration: 1000,
| + | |
| - | //transition: $jit.Trans.Quart.easeInOut
| + | |
| - | //});
| + | |
| - | }
| + | |
| - | },
| + | |
| - | // Only used when Label type is 'HTML' or 'SVG'
| + | |
| - | // Add text to the labels.
| + | |
| - | // This method is only triggered on label creation
| + | |
| - | onCreateLabel: function(domElement, node){
| + | |
| - | var labels = sb.config.Label.type,
| + | |
| - | aw = node.getData('length');
| + | |
| - | if (labels === 'HTML' && (node._depth < 2 || aw > 2000)) {
| + | |
| - | domElement.innerHTML = node.name;
| + | |
| - | } else if (labels === 'SVG'){
| + | |
| - | if (node._depth < 2){
| + | |
| - | domElement.firstChild.appendChild(document.createTextNode(node.name));
| + | |
| - | } else if(aw > 2000) {
| + | |
| - | domElement.firstChild.appendChild(document.createTextNode(node.name));
| + | |
| - | }
| + | |
| - | }
| + | |
| - | },
| + | |
| - | // Only used when Label type is 'HTML' or 'SVG'
| + | |
| - | // Change node styles when labels are placed
| + | |
| - | // or moved.
| + | |
| - | onPlaceLabel: function(domElement, node){
| + | |
| - | var labels = sb.config.Label.type;
| + | |
| - | if (labels === 'SVG') {
| + | |
| - | var fch = domElement.firstChild;
| + | |
| - | var style = fch.style;
| + | |
| - | style.display = '';
| + | |
| - | style.cursor = 'pointer';
| + | |
| - | style.fontSize = "0.8em";
| + | |
| - | fch.setAttribute('fill', "#fff");
| + | |
| - | } else if (labels === 'HTML') {
| + | |
| - | var style = domElement.style;
| + | |
| - | style.display = '';
| + | |
| - | style.cursor = 'pointer';
| + | |
| - | style.fontSize = "0.8em";
| + | |
| - | style.color = "#ddd";
| + | |
| - | var left = parseInt(style.left);
| + | |
| - | var w = domElement.offsetWidth;
| + | |
| - | style.left = (left - w / 2) + 'px';
| + | |
| - | }
| + | |
| - | }
| + | |
| - | });
| + | |
| - | //load JSON data.
| + | |
| - | sb.loadJSON(json);
| + | |
| - | //compute positions and plot.
| + | |
| - | sb.refresh();
| + | |
| - |
| + | |
| - | //end
| + | |
| - | }
| + | |
| - | </script> | + | |
| | </head> | | </head> |
| | <body> | | <body> |
"
