Skip to content

Instantly share code, notes, and snippets.

@emepyc

emepyc/README.md

Last active January 12, 2016 16:49
Show Gist options
  • Save emepyc/7c73519ee7a1300eb68a to your computer and use it in GitHub Desktop.
Save emepyc/7c73519ee7a1300eb68a to your computer and use it in GitHub Desktop.
Download ZIP
Variable board height
Raw
README.md

Example of TnT Genome showing a board of variable height depending on the number of genes to display. This is done by configuring the genome layout.

Raw
index.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://tntvis.github.io/tnt.genome/build/tnt.genome.css" type="text/css" />
<style>
#mydiv {
margin-top: 20px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://tntvis.github.io/tnt.genome/build/tnt.genome.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script>
current_height = 200;
var gene_track = tnt.board.track()
.height(current_height) // the default height
.color("#FFFFFF")
.display(tnt.board.track.feature.genome.gene()
.color("#550055")
)
.data(tnt.board.track.data.genome.gene());
// expand or contract the height of the gene track as needed
gene_track.display().layout()
.fixed_slot_type("expanded")
.keep_slots(false)
.on_layout_run (function (types, current) {
var needed_height = types.expanded.needed_slots * types.expanded.slot_height;
if (needed_height !== current_height) {
current_height = needed_height;
gene_track.height(needed_height);
genome.tracks(genome.tracks());
}
});
var genome = tnt.board.genome().species("human").gene("brca2").width(950);
genome(document.getElementById("mydiv"));
genome.add_track(gene_track);
genome.start();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment