Skip to content

Instantly share code, notes, and snippets.

@emepyc
Created November 9, 2016 12:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emepyc/9b0cb121ca8d5129b3590704191bd99c to your computer and use it in GitHub Desktop.
Save emepyc/9b0cb121ca8d5129b3590704191bd99c to your computer and use it in GitHub Desktop.
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.

<!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