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.
Created
November 9, 2016 12:10
-
-
Save emepyc/9b0cb121ca8d5129b3590704191bd99c to your computer and use it in GitHub Desktop.
Boxed genome visualisation in TnT Genome
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>TnT Themes</title> | |
<div id="body"> | |
<!-- D3 --> | |
<script src="http://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="http://tntvis.github.io/tnt.genome/build/tnt.genome.css" type="text/css" /> | |
<script src="http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment