D3 Examples - Boxed genome visualisation in TnT Genome

Boxed genome visualisation in TnT Genome

Example of TnT Genome where the visualisation is restricted to two given coordinates using the min_coord and max_coord API methods. Zoom out until you find the given limits. These new limits are passed as Promises that are resolved when the visualisation is started. By default the lower limit is 0 and the higher limit is the length of the chromosome in display.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>TnT Themes</title>
​
<div id="body">
​
  <!-- D3 -->
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
​
  <!-- es6-promise -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.0.5/es6-promise.min.js"></script>
​
​
  <!-- TnT -->
  <link rel="stylesheet" href="https://tntvis.github.io/tnt.genome/build/tnt.genome.css" type="text/css" />
  <script src="https://tntvis.github.io/tnt.genome/build/tnt.genome.min.js"></script>
​
  <div id="genomeBrowser"></div>
  <script>
​
    (function() {
        var gB = tnt.board.genome()
            .species("human")
            .gene("brca2")
            .width(950)
            .min_coord (new Promise (function (res) {
                res(32306637);
            }))
            .max_coord (new Promise (function (res) {
                res(32532414);
            }))
​
        gB(document.getElementById("genomeBrowser"));
​
        var gene_track = tnt.board.track()
            .height(200)
            .color("#FFFFFF")
            .display(tnt.board.track.feature.genome.gene()
                 .color("#550055")
            )
            .data(tnt.board.track.data.genome.gene());
        gB.add_track(gene_track);
        gB.start();
    })();
​
  </script>
</div>
​
    