Old school D3 from simpler times

All examples By author By category About

Wanagram

Full window Github gist

Final Genome Browser

Genome browser for phamerator.org

forked from scresawn's block: genome browser

forked from mcgovemc's block: Final Genome Browser

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style> path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
    }
    .axis path,
    .axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
    }
    div.tooltip {
    position: absolute;	
    text-align: center;	
    width: 60px;	
    height: 28px;		
    padding: 2px;	
    font: 12px "sans-serif";	
    background: lightsteelblue;	
    border: 0px;					
    border-radius: 8px;
    }
    body { 
    margin: ;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:2;
    background-image: linear-gradient(to bottom, #EFEFBB, #D4D3DD 100%); 
    }
  </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.0.min.js">
    </script>
    <script src="aminoacidseq.js" type="text/javascript">
    </script>
    
    <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" rel="stylesheet">
    
    <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" rel="stylesheet">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
</head>
<body>
  
  
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog" id="chicken">
      
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-dismiss="modal" type="button">&times;</button>
          <h4 class="modal-title">Information</h4>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer"></div>
      </div>
    </div>
  </div>
  <script>
    $(document).ready(function() {
    $.getJSON("genes.json.txt", function(data) {
      console.log(data[0].genes[0].name)
      function calc(name, phage) {
        console.log(data)
                           console.log("name: " + name + "    phage:" + phage)
													 var objpos = 0;
                           var genepos = 0;
                           for(i=0;i<data.length;i++){
                             if(data[i].phagename==phage){
                               objpos = i;
                             }
                           }
        									 for(i=0;i<data[objpos].genes.length;i++){
                             if(data[objpos].genes[i].name==name){
                               genepos = i;
                             }
                           }
        								
                           var aminoSeq = [];
                           var sequence = data[objpos].genes[genepos].sequence;
        console.log(objpos + genepos)
                           var aminoArray = [];
                           var startNuc = 0;
                           var reverse = "";
                           var gCount = 0;
                           var cCount = 0;
                           var aCount = 0;
                           var tCount = 0;
    
    
                           for (i = 1; i < sequence.length / 3; i++) {
                               aminoArray.push(sequence.substring(startNuc, startNuc + 3));
                               startNuc = i * 3;
                           }
                           //Matches sequence to amino acid
    
                           for (i = 0; i < aminoArray.length; i++) {
                               switch (aminoArray[i]) {
                                   case 'GCA':
                                   case 'GCC':
                                   case 'GCG':
                                   case 'GCT':
                                       aminoSeq.push("Ala")
                                       break;
                                   case 'AAC':
                                   case 'AAT':
                                   case 'GAC':
                                   case 'GAT':
                                       aminoSeq.push("Asx")
                                       break;
                                   case 'TGC':
                                   case 'TGT':
                                       aminoSeq.push("Cys")
                                       break;
                                   case 'GAC':
                                   case 'GAT':
                                       aminoSeq.push("Asp")
                                       break;
                                   case 'GAA':
                                   case 'GAG':
                                       aminoSeq.push("Glu")
                                       break;
                                   case 'TTC':
                                   case 'TTT':
                                       aminoSeq.push("Phe")
                                       break;
                                   case 'GGA':
                                   case 'GGC':
                                   case 'GGG':
                                   case 'GGT':
                                       aminoSeq.push("Gly")
                                       break;
                                   case 'CAC':
                                   case 'CAT':
                                       aminoSeq.push("His")
                                       break;
                                   case 'ATA':
                                   case 'ATC':
                                   case 'ATT':
                                       aminoSeq.push("Ile")
                                       break;
                                   case 'AAA':
                                   case 'AAG':
                                       aminoSeq.push("Lys")
                                       break;
                                   case 'CTA':
                                   case 'CTC':
                                   case 'CTG':
                                   case 'CTT':
                                   case 'TTA':
                                   case 'TTG':
                                       aminoSeq.push("Leu")
                                       break;
                                   case 'ATG':
                                       aminoSeq.push("Met")
                                       break;
                                   case 'AAC':
                                   case 'AAT':
                                       aminoSeq.push("Asn")
                                       break;
                                   case 'CCA':
                                   case 'CCC':
                                   case 'CCG':
                                   case 'CCT':
                                       aminoSeq.push("Pro")
                                       break;
                                   case 'CAA':
                                   case 'CAG':
                                       aminoSeq.push("Gln")
                                       break;
                                   case 'AGA':
                                   case 'AGG':
                                   case 'CGA':
                                   case 'CGC':
                                   case 'CGG':
                                   case 'CGT':
                                       aminoSeq.push("Arg")
                                       break;
                                   case 'AGC':
                                   case 'AGT':
                                   case 'TCA':
                                   case 'TCC':
                                   case 'TCG':
                                   case 'TCT':
                                       aminoSeq.push("Ser")
                                       break;
                                   case 'ACA':
                                   case 'ACC':
                                   case 'ACG':
                                   case 'ACT':
                                       aminoSeq.push("Thr")
                                       break;
                                   case 'GTA':
                                   case 'GTC':
                                   case 'GTG':
                                   case 'GTT':
                                       aminoSeq.push("Val")
                                       break;
                                   case 'TGG':
                                       aminoSeq.push("Trp")
                                       break;
                                   case 'TAC':
                                   case 'TAT':
                                       aminoSeq.push("Tyr")
                                       break;
                                   case 'CAA':
                                   case 'CAG':
                                   case 'GAA':
                                   case 'GAG':
                                       aminoSeq.push("Glx")
                                       break;
                                   case 'TAA':
                                   case 'TAG':
                                   case 'TGA':
                                       aminoSeq.push("STOP")
                                       break;
                               }
                           }
    
                           var aminoOrg = aminoSeq.join("-")
    
                           for (i = 0; i < sequence.length; i++) {
                               switch (sequence[i]) {
                                   case "A":
                                       reverse = reverse + "T"
                                       break;
                                   case "G":
                                       reverse = reverse + "C"
                                       break;
                                   case "C":
                                       reverse = reverse + "G"
                                       break;
                                   case "T":
                                       reverse = reverse + "A"
                                       break;
                               }
    
                           }
    
    
                           for (i = 0; i < sequence.length; i++) {
                               switch (sequence[i]) {
                                   case "A":
                                       break;
                                   case "T":
                                       break;
                                   case "C":
                                       cCount++
                                       break;
                                   case "G":
                                       gCount++
                                       break;
                               }
                           }
                           var gcPcnt = Number(((gCount + cCount) / sequence.length).toFixed(3))
                           var soln = {
                               sequence: sequence,
                               aminoSeq: aminoOrg,
                               reverse: reverse,
                               gcPcnt: gcPcnt
                           }
        console.log(soln)
                           return ("<p><b>Sequence: <\/b>" + soln.sequence + "<br>" + "<b>Reverse:   <\/b>" + soln.reverse + "<br>" + "<b>Amino-chain: <\/b>" + soln.aminoSeq + "<br>" + "<b>GC%: <\/b>" + soln.gcPcnt * 100 + "%<\/p>");
    
    
                       }
    
    var svg = d3.select("body").append("svg").attr("height", 1000);
    d3.json("genes.json.txt", function(error, json) {
       if (error) return console.warn(error);
       //console.log(json);
       svg.attr("width", function (d) {
         return d3.max(json, function(d) {
           return d.genomelength/10;
         })
       });
    
       // Define the div for the tooltip
       var div = d3.select("body").append("div")
         .attr("class", "tooltip")
         .style("opacity", 0);
    
       var phage = svg.selectAll(".genomes")
         .data(json)
         .enter()
         .append("g");
       phage.attr("transform", function(d, i) { return "translate(0," + (100 + (i*225)) + ")"; });
    
       phage.append("rect") // background for ruler
         .attr({x: 0, y: 0, width: function(d) { return d.genomelength/10; }, height: 30})
         .style({"stroke-width": "2px", "fill": "white", "stroke": "black"})
         .attr("stroke-opacity", 0)
         .transition().duration(1000)
         .attr("stroke-opacity", 1);
    
       var group = phage.selectAll(".thousandticks")
         .data(function (d) {
             ticks = [];
             genome_positions = d3.range(d.genomelength);
             genome_positions.forEach(function (currentValue, index, myArray) {
               if (currentValue % 1000 === 0) {
                 ticks.push(currentValue);
               }
             });
             return ticks;
           }
         )
         .enter()
         .append("g");
       group.append("rect")
         .style({"fill": "black"})
         //.attr({x: 0, y: 100, width: "1px", height: 30})
         .attr({x: function (d) { return d/10; }, y: 0, width: "1px", height: 30})
         .attr({"fill-opacity": 0})
         .transition().duration(1500)
         .attr({"fill-opacity": 1});
    
       //.attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
       group.append("text") // kbp label
         .attr("x", function(d) {return (d/10) + 3;})
         .attr("y", 12)
         .attr("font-family", "sans-serif")
         .attr("font-size", "14px")
         .attr("fill", "#8431cd")
         .style("text-anchor", "start")
         .text(function(d) { return d/1000; })
         .attr({"fill-opacity": 0})
         .transition().duration(1500)
         .attr({"fill-opacity": 1});
       var group2 = phage.selectAll(".fivehundredticks")
         .data(function (d) {
           ticks = [];
           genome_positions = d3.range(d.genomelength);
           genome_positions.forEach(function (currentValue, index, myArray) {
             if (currentValue % 500 === 0 & currentValue % 1000 !== 0) {
               ticks.push(currentValue);
             }
           })
           return ticks;
         })
         .enter()
         .append("g");
       group2.append("rect")
         .style({"fill": "black"})
         .attr({x: function(d) {return d/10;}, y: 0, width: "1px", height: 15})
         .attr({"fill-opacity": 0})
         .transition().duration(1500)
         .attr({"fill-opacity": 1});
       //.attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
       var group3 = phage.selectAll(".onehundredticks")
         .data(function (d) {
           ticks = [];
           genome_positions = d3.range(d.genomelength);
           genome_positions.forEach(function (currentValue, index, myArray) {
             if (currentValue % 100 === 0 & currentValue % 1000 !== 0 & currentValue % 500 !== 0) {
               ticks.push(currentValue);
             }
           })
           return ticks;
         })
         .enter()
         .append("g");
       group3.append("rect")
         .style({"fill": "black"})
         .attr({x: function (d) { return d/10; }, y: 15, width: "1px", height: 15})
         .attr("fill-opacity", 0)
         .transition().duration(1500)
         .attr("fill-opacity", 1);
    
       gene = phage.selectAll(".genes")
         .data(function(d, i) { console.log(i, d); return d.genes;})
         .enter()
         .append("g");
         gene.append("rect")
         .on("click", function(d) {
            $('#myModal').modal('show')
            var infodiv = d3.select(".modal-body").data(d).html(calc(d.name, d.phage))
                               })
         .on("mouseover", function(d){
            d3.select("body").style({"cursor":"pointer"})
                               })
         .on("mouseout",function(d){
            d3.select("body").style({"cursor":"default"})
                               })
         .attr("y", function (d) {
           if (d.direction == "forward") {
             if (d.name % 2 === 0) {
               return  -70;
             }
             else { return -30;}
           }
           else if (d.direction == "reverse") {
             if (d.name % 2 === 0) {
               return 30;
             }
             else { return 60;}
           }
         })
         .attr("x", function (d) {
           if (d.direction === "forward") {
             return (0 - ((d.stop-d.start)/10)) - 2;
           }
           else if (d.direction === "reverse") {
             w = d3.select("svg").style("width");
             return w;
           }
         })
         .attr("height", function (d) {return 30;})
         .attr("width", function (d) { return (d.stop-d.start)/10; })
         .style({"stroke":"black", "stroke-width": "2px"})
         .attr("fill", function (d) {
           if (d.direction == "forward") {
             return "#6831cd";
           }
           else if (d.direction == "reverse") {
             return "#efd033";
           }
           else {
             return "black";
           }
         })
       
    
         .transition().delay(1000).duration(1500)
         .attr("x", function (d) { return d.start/10; });
    
         gene.append("text") // gene name
         .attr("x", function(d) { return ((d.start + d.stop)/2)/10;})
         .attr("y", function (d) {
           if (d.direction == "forward") {
             if (d.name % 2 === 0) { // forward and even
               return -50;
             }
             else { return -10;} // forward and odd
           }
           else if (d.direction == "reverse") {
             if (d.name % 2 === 0) { // reverse and even
               return 50;
             }
             else { return 80;} //reverse and odd
           }
         })
         .style({"text-anchor": "middle", "fill": "black"})
         .attr("font-family", "sans-serif")
         .text(function(d) {return d.name})
         .attr("fill-opacity", 0)
         .transition().delay(2000).duration(1500)
         .attr("fill-opacity", 1);
    
    
       gene.append("text") // pham name
         .attr("x", function(d) { return ((d.start + d.stop)/2)/10;})
         .attr("y", function (d) {
           if (d.direction == "forward") {
             if (d.name % 2 === 0) {
               return -80;
             }
             else { return -40;}
           }
           else if (d.direction == "reverse") {
             if (d.name % 2 === 0) {
               return 80;
             }
             else { return 110;}
           }
         })
    
         .style({"text-anchor": "middle", "fill": "blue"})
         .attr("font-family", "sans-serif")
         .text(function(d) {return d.pham})
         .attr("fill-opacity", 0)
         .transition().delay(3500).duration(1500)
         .attr("fill-opacity", 1);
    
     });
    })})
     
  </script>
</body>

Modified http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js