Skip to content

Instantly share code, notes, and snippets.

@emepyc

emepyc/README.md

Last active November 9, 2017 18:03
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/18dd29b33fcac6978c37 to your computer and use it in GitHub Desktop.
Save emepyc/18dd29b33fcac6978c37 to your computer and use it in GitHub Desktop.
Download ZIP
TnT tree updates
Raw
README.md

Example of TnT visualisation showing tree updates.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>TnT Examples</title>
<div id="body">
<!-- D3.js -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- TnT -->
<link rel="stylesheet" href="http://tntvis.github.io/tnt/build/tnt.css" type="text/css" />
<script src="http://tntvis.github.io/tnt/build/tnt.min.js"></script>
<script src="render.js"></script>
<div id="mydiv"></div>
<script>
(function() {
render(document.getElementById("mydiv"));
}());
</script>
</div>
Raw
render.js
// The height of tree labels and tracks
var height = 30;
// Create tree and board
var tree = tnt.tree();
var board = tnt.board();
var newick = "(((((homo_sapiens,pan_troglodytes),callithrix_jacchus),mus_musculus),taeniopygia_guttata),danio_rerio);";
var newick2 = "(((((mus_musculus,homo_sapiens),taeniopygia_guttata),danio_rerio);";
function render (div) {
var label_en = tnt.tree.label.text()
.text(function (node) {
if (node.children) {
return "";
} else {
return node.id.accession;
}
})
.fontsize(10)
.height(height);
var sel = d3.select(div)
.append("select")
.on("change", function () {
var cond;
if (this.value === 'Example Tree') {
tree
.data (tnt.tree.parse_newick (newick))
.layout (tnt.tree.layout.vertical()
.width(430)
.scale(false))
.label (tnt.tree.label.text()
.height(height)
);
}
if (this.value === 'Example Tree 2') {
tree
.data (tnt.tree.parse_newick (newick2))
.layout (tnt.tree.layout.vertical()
.width(430)
.scale(false)
)
.label (tnt.tree.label.text()
.height(height)
);
}
vis.update();
});
sel
.append("option")
.attr("selected", 1)
.text("Example Tree ");
sel
.append("option")
.text("Example Tree 2");
tree
.data (tnt.tree.parse_newick (newick))
.layout (tnt.tree.layout.vertical()
.width(430)
.scale(false)
)
.label (tnt.tree.label.text()
.height(height)
);
// collapse nodes on click
tree.on("click", (function(node){
node.toggle();
vis.update();
}));
// TRACK SIDE
board
.from(0)
.to(1000)
.width(300)
.max(1000);
var track = function (leaf_node) {
var leaf = leaf_node.data();
var sp = leaf.name;
return tnt.board.track()
.color("#EBF5FF")
.data (tnt.board.track.data.sync()
.retriever (function () {
return data[sp] || [];
})
)
.display(tnt.board.track.feature.ensembl()
.color("green")
.index(function (d) {
return d.start;
})
);
};
var axis_top = tnt.board.track()
.height(0)
.color("white")
.display(tnt.board.track.feature.axis()
.orientation("top")
);
var axis_bottom = tnt.board.track()
.height(18)
.color("white")
.display(tnt.board.track.feature.axis()
.orientation("bottom")
);
var vis = tnt()
.tree(tree)
.key('name')
.top(axis_top)
.bottom(axis_bottom)
.board(board)
.track(track);
vis(div);
}
var data = {
'homo_sapiens' : [
{
type : 'high',
start : 700,
end : 800
},
{
start : 350,
end : 423
}
],
'pan_troglodytes' : [
{
start : 153,
end : 160
},
{
start : 250,
end : 333
},
{
start : 550,
end : 633
}
],
'callithrix_jacchus' : [
{
type : 'high',
start : 250,
end : 333
}
],
'mus_musculus' : [
{
type : 'high',
start : 24,
end : 123
},
{
start : 553,
end : 564
}
],
'taeniopygia_guttata' : [
{
start : 450,
end : 823
}
],
'danio_rerio' : [
{
start : 153,
end : 165
}
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment