<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <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">

body{
        font-family:Arial;
      	}
    </style>
    <title></title>
</head>

<body>
    
    
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-content" id="chicken">
            
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title">Genome Information</h4>
                </div>
                <div class="modal-body">Sequence</div>
                <div class="modal-body">G-C Content</div>
            </div>
        </div>
    </div>
  </body>
<head>
  <meta charset="utf-8">
  <style>

svg {
  font: 10px sans-serif;
}

path {
  -webkit-transition: fill-opacity 250ms linear;
}

.selecting path {
  fill-opacity: .2;
}

.selecting path.selected {
  stroke: #f00;
  stroke-width: 2px;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}
    
.modal-body {
      font-family: Courier;
    }

</style>
<script src="//d3js.org/d3.v3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

<style>

body { 
        margin:0;
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0; 
    }

div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 60px;                  
  height: 28px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: lightsteelblue;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}
  .d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: lightsteelblue;
  color: #fff;
  border-radius: 2px;
}
.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;
}
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>

</head>

<body>
  <script>
     var margin = {top: 30, right: 10, bottom: 0, left: 10},
    width = 960 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg").attr("height", 1000)
     .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 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;
      })
    });

var x = d3.scale.ordinal()
    .domain("height",1000)
    .rangePoints([0, width], 1);
   
var brush = d3.svg.brush();
       
 svg.append("g")
    .attr("class", "brush")
    .call(brush.x(x)
    .on("brushstart", brushstart)
    .on("brush", brushmove)
    .on("brushend", brushend))

.selectAll("rect")
    .attr("height", height);

function brushstart() {
  svg.classed("selecting", true);
}

function brushmove() {
  var s = d3.event.target.extent();
 }

function brushend() {
  $('#myModal').modal('show');
  var modalbody = d3.select(".modal-body");
  var s = "";
  json.forEach(function(value, index, arr) {
    s = s + value.sequence.slice(brush.extent()[0]*10, brush.extent()[1]*10) + "<br>"
  })
  modalbody.html("<span>" + s + "</span>");
  console.log(json);
  console.log("brush extent: ", brush.extent());
  //console.log(bbox.width);
 var rect = svg.append("g")
 //.attr("width", bbox.width)
 // .attr("height", bbox.height)
  svg.classed("selecting", !d3.event.target.empty());
}

//.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", "green")
      .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")
    .on('mouseover', tip.show)
      
      .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('mouseover', tip.show)
      	.on('mouseout', tip.hide)
      	.on('click', hidden.show)
     	.on('dblclick', hidden.hide)
      //.on("mouseup", function(d) {$('#myModal').modal('show')})
                                
        .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 "green";
        }
        else if (d.direction == "reverse") {
          return "red";
        }
        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

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.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

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

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

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