cttv.genome
Version:
Lightweight genome browser for CTTV targets based on TnT Genome
70 lines (54 loc) • 1.86 kB
HTML
<meta charset="utf-8">
<title>TnT Themes</title>
<div id="body">
<!-- Fontawesome -->
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css"/>
<style>
.center {
margin: auto;
width: 60%;
padding: 10px;
}
</style>
<!-- D3 -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- TnT Genome -->
<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>
<!-- Target Genome Browser -->
<link rel="stylesheet" href="../build/cttv.genome.css" type="text/css" />
<script src="../build/cttv.genome.js"></script>
<h1>CTTV minimal genome browser</h1>
<div id="genomeBrowser" class="center"></div>
<script>
var gB = tnt.board.genome()
.species("human")
.gene("ENSG00000157764")
.width(950);
var gBTheme = targetGenomeBrowser()
.show_nav(false)
.show_links(false);
gBTheme(gB, document.getElementById("genomeBrowser"));
var geneTrack = gBTheme.track("gene");
geneTrack.display().on("click", function (gene) {
var elem = this;
var tooltip_obj = function (g) {
var obj = {};
obj.header = (g.display_name || g.external_name) + " (" + g.id + ")";
obj.rows = [];
obj.rows.push( {
"label" : "Biotype",
"value" : g.biotype
});
obj.rows.push( {
"label" : "Description",
"value" : g.description || g.gene.description
});
return obj;
}
tnt.tooltip.table()
.call(elem, tooltip_obj(gene));
});
</script>
</div>