Team:Amsterdam/maarten/

From 2012.igem.org

(Difference between revisions)
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>

Revision as of 14:30, 4 September 2012

Enter your plasmid in fasta or genbank format


Enter your sensors in fasta or genbank format























Retrieved from "http://2012.igem.org/Team:Amsterdam/maarten/"