Genome Viewer Final

Genome browser for phamerator.org

forked from scresawn's block: genome browser

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="//d3js.org/d3.v3.min.js" language="JavaScript"></script>
  <script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
  <style>
    body { 
        margin: ;
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:2;
      	background-image: linear-gradient(to bottom, #003973, #E5E5BE 100%);
    }
    /* Tip box */
    .d3-tip {
      line-height: 1;
  		font-weight: bold;
      padding: 11px;
      background: rgba(0, 0, 0, 0.8);
      color: #ff0505;
      border-radius: 2px;
    }
		/* This is for the little triangle for the tooltip */
    .d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }
    /* Margins for the little triangle */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }
    /* Lower tip box */
    .d3-hidden {
      line-height: 1;
  		font-weight: bold;
      padding: 11px;
      background: rgba(1, 34, 34, 0.8);
      color: #1fe429;
      border-radius: 2px;
    }
		/* This is for the little triangle for the tooltip */
    .d3-hidden:after {
      box-sizing: border-box;
      display: inline;
      font-size: 20px;
      width: 100%;
      line-height: 1;
      color: rgba(1, 0, 0, 0.8);
      content: "\25B2";
      position: absolute;
      text-align: center;
    }
    /* Margins for the little triangle */
    .d3-hidden.n:after {
      margin: -55px 0 0 0;
      top: 100%;
      left: 0;
    }
    /* For download Link */
    #download {
      cursor: pointer;
      text-decoration: none;
      color: white;
    }
    .dot {
  		stroke: #000;
		}
    .button {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 10px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
		}
   
   
  </style>
</head>

<body>
  <div id="viz"></div>
  <a href="#" id="download">Download SVG</a>

// text above or below boxes
      genes.append("text") 
        .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 28;
            } else { 
              	return 59;
            	}
          } else if (d.direction == "reverse") {
            	if (d.name % 2 === 0) {
              	return 181;
            	} else { 
              		return 213;
            		}
          	}
      	})
        .style({"text-anchor":"middle","fill":"black","font-weight":"bold"})
        .attr("font-family","sans-serif")
        .text(function(d) {return d.subnum;})
        .attr("fill-opacity", 0)
        .transition().delay(4500).duration(1000)
        .attr("fill-opacity", 1);
      
     //Show SNPs
    function SNPs() {  
      var snp = genes.selectAll(".dot")
      		.data("genes.json.txt")
      	.enter().append("circle")
      		.attr("class", "dot")
      		.transition().delay(6000).duration(2000)
      		.attr("r", 4)
          .attr({cx:323})
          .attr({cy:10})
          .style("fill", "red");
    }
      d3.select("#download")
    .on("mouseover", writeDownloadLink);
//Right-Click for Download SVGs
  function writeDownloadLink(){
    var html = d3.select("svg")
        .attr("title", "svg_title")
        .attr("version", 1.1)
        .attr("xmlns", "https://www.w3.org/2000/svg")
        .node().parentNode.innerHTML;
    
    d3.select(this)
        .attr("href-lang", "image/svg+xml")
        .attr("href", "data:image/svg+xml;base64,\n" + btoa(html))
        .on("mousedown", function(){
            if(event.button != 2){
                d3.select(this)
                    .attr("href", null)
                    .html("Use right click");
            }
        })
        .on("mouseout", function(){
            d3.select(this)
                .html("Download SVG");
        });
	};
 });
  </script>
  <button onclick="SNPs()" class="button">Show SNPs</button>
</body>

Modified http://mbostock.github.com/d3/d3.js to a secure url

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://mbostock.github.com/d3/d3.js

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

https://d3js.org/d3.v3.min.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js