Skip to content

Instantly share code, notes, and snippets.

@emepyc

emepyc/README.md

Last active January 12, 2016 16:41
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/563dc6b946b40dd6cfdb to your computer and use it in GitHub Desktop.
Save emepyc/563dc6b946b40dd6cfdb to your computer and use it in GitHub Desktop.
Download ZIP
Sorting nodes
Raw
README.md

Example of TnT Tree in which the nodes are sorted and colored dynamically.

Raw
index.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://tntvis.github.io/tnt.tree/build/tnt.tree.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.tree/build/tnt.tree.min.js"></script>
<script src="sort_nodes.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script>
sort_nodes(document.getElementById("mydiv"));
</script>
</body>
Raw
sort_nodes.js
var sort_nodes = function (div) {
// Selection of sorting criteria
var menu_pane1 = d3.select(div)
.append("div")
.append("span")
.text("Sort By: ");
var sel1 = menu_pane1
.append("select")
.on("change", function (d) {
var prop = this.value;
tree.root().sort(function(node1, node2) {
var highest1 = get_highest_val(node1, prop);
var highest2 = get_highest_val(node2, prop);
return get_highest_val(node1, prop) - get_highest_val(node2, prop);
});
tree.update();
});
sel1
.append("option")
.attr("value", "Chromosome pairs")
.attr("selected", 1)
.text("Number of chromosome pairs");
sel1
.append("option")
.attr("value", "Protein-coding genes")
.text("Number of protein-coding genes");
sel1
.append("option")
.attr("value", "Genome length")
.text("Genome length");
sel1
.append("option")
.attr("value", "Cuteness factor")
.text("Cuteness factor");
// Selection of coloring criteria
var menu_pane2 = d3.select(div)
.append("div")
.append("span")
.text("Color by: ");
var sel2 = menu_pane2
.append("select")
.on("change", function (d) {
// Create a new color scale
var prop = this.value;
var vals = [];
for (var sp in species_data) {
vals.push(species_data[sp][prop]);
}
var extent = d3.extent(vals);
var scale = d3.scale.linear()
.domain(extent)
.range(["steelblue", "red"]);
tree.node_display(tree.node_display()
.fill(function (node) {
if (node.is_leaf()) {
return scale(species_data[node.node_name()][prop]);
}
return "black";
})
);
tree.update_nodes();
});
sel2
.append("option")
.attr("value", "Chromosome pairs")
.attr("selected", 1)
.text("Number of chromosome pairs");
sel2
.append("option")
.attr("value", "Protein-coding genes")
.text("Number of protein-coding genes");
sel2
.append("option")
.attr("value", "Genome length")
.text("Genome length");
sel2
.append("option")
.attr("value", "Cuteness factor")
.text("Cuteness factor");
var tree_data = tnt.tree.parse_newick(newick);
var prop = "Chromosome pairs";
var vals = [];
for (var sp in species_data) {
vals.push(species_data[sp][prop]);
}
var extent = d3.extent(vals);
var scale = d3.scale.linear()
.domain(extent)
.range(["steelblue", "red"]);
var tree = tnt.tree();
tree
.data(tree_data)
.duration(1000)
.layout(tnt.tree.layout.vertical()
.width(600)
.scale(false)
)
.node_display(tree.node_display()
.size(7)
.fill (function(node) {
if (node.is_leaf()) {
return scale(species_data[node.node_name()][prop]);
}
return "black";
})
);
// Increase the separation between nodes
tree
.label()
.height(function(){
return 20;
});
var root = tree.root();
root.sort (function (node1, node2) {
var highest1 = get_highest_val(node1, 'Chromosome pairs');
var highest2 = get_highest_val(node2, 'Chromosome pairs');
return highest1 - highest2;
});
// The visualization is started at this point
tree(div);
};
// Helper function to get the lowest value in
// the subnode -- this is used in the sort cbak
var get_highest_val = function (node, prop) {
var highest = 0;
node.apply(function (n) {
if (species_data[n.node_name()] === undefined) {
return;
}
var val = parseFloat(species_data[n.node_name()][prop]);
if (val > highest) {
highest = val;
}
});
return highest;
};
var newick = "(((((((Mus musculus:0.0845,Rattus norvegicus:0.0916):0.2567,Oryctolagus cuniculus:0.2157):0.0153,(((((Pan troglodytes:0.0067,Homo sapiens:0.0067):0.0022,Gorilla gorilla:0.0088):0.0097,Pongo abelii:0.0183):0.0143,Macaca mulatta:0.0375):0.0220,Callithrix jacchus:0.0661):0.0891):0.0206,(((Felis catus:0.0986,Canis familiaris:0.1025):0.0498,Equus caballus:0.1094):0.0107,((Ovis aries:0.0618,Bos taurus:0.0618):0.0869,Sus scrofa:0.1073):0.0403):0.0329):0.2584,Monodelphis domestica:0.3408):0.0717,Ornithorhynchus anatinus:0.4566):0.1095,(((Gallus gallus:0.0414,Meleagris gallopavo:0.0414):0.1242,Taeniopygia guttata:0.1715):0.3044,Anolis carolinensis:0.4989):0.1700)";
var species_data = {
'Homo sapiens' : {
'Chromosome pairs' : 23,
'Protein-coding genes' : 20805,
'Genome length' : 3.1,
'Ensembl date' : new Date(2001, 07),
'Cuteness factor' : 6
},
'Tetraodon nigroviridis' : {
'Chromosome pairs' : 21,
'Protein-coding genes' : 19602,
'Genome length' : 0.36,
'Ensembl date' : new Date(2004, 09),
'Cuteness factor' : 10
},
'Monodelphis domestica' : {
'Chromosome pairs' : 11,
'Protein-coding genes' : 21327,
'Genome length' : 3.6,
'Ensembl date' : new Date(2005, 11),
'Cuteness factor' : 9
},
'Mus musculus' : {
'Chromosome pairs' : 20,
'Protein-coding genes' : 23148,
'Genome length' : 2.7,
'Ensembl date' : new Date(2002,01),
'Cuteness factor' : 7
},
'Ornithorhynchus anatinus' : {
'Chromosome pairs' : 26,
'Protein-coding genes' : 21698,
'Genome length' : 2.1,
'Ensembl date' : new Date(2006,12),
'Cuteness factor' : 9
},
'Pan troglodytes' : {
'Chromosome pairs' : 24,
'Protein-coding genes' : 18759,
'Genome length' : 3.3,
'Ensembl date' : new Date(2004,05),
'Cuteness factor' : 6
},
'Macaca mulatta' : {
'Chromosome pairs' : 21,
'Protein-coding genes' : 21905,
'Genome length' : 3.1,
'Ensembl date' : new Date(2005,12),
'Cuteness factor' : 6
},
'Ovis aries' : {
'Chromosome pairs' : 27,
'Protein-coding genes' : 20921,
'Genome length' : 2.6,
'Ensembl date' : new Date(2013,12),
'Cuteness factor' : 6
},
'Sus scrofa' : {
'Chromosome pairs' : 19,
'Protein-coding genes' : 21630,
'Genome length' : 2.8,
'Ensembl date' : new Date(2009,09),
'Cuteness factor' : 5
},
'Ciona intestinalis' : {
'Chromosome pairs' : 14,
'Protein-coding genes' : 16658,
'Genome length' : 0.1,
'Ensembl date' : new Date(2005,05),
'Cuteness factor' : 3
},
'Rattus norvegicus' : {
'Chromosome pairs' : 21,
'Protein-coding genes' : 22941,
'Genome length' : 2.9,
'Ensembl date' : new Date(2002,11),
'Cuteness factor' : 5
},
'Anolis carolinensis' : {
'Chromosome pairs' : 14,
'Protein-coding genes' : 18596,
'Genome length' : 1.8,
'Ensembl date' : new Date(2009,03),
'Cuteness factor' : 7
},
'Bos taurus' : {
'Chromosome pairs' : 30,
'Protein-coding genes' : 19994,
'Genome length' : 2.7,
'Ensembl date' : new Date(2005,07),
'Cuteness factor' : 6
},
'Pongo abelii' : {
'Chromosome pairs' : 24,
'Protein-coding genes' : 20424,
'Genome length' : 3.4,
'Ensenbl date' : new Date(2011,04),
'Cuteness factor' : 8
},
'Callithrix jacchus' : {
'Chromosome pairs' : 23,
'Protein-coding genes' : 20993,
'Genome length' : 2.9,
'Ensembl date' : new Date(2009,09),
'Cuteness factor' : 8
},
'Equus caballus' : {
'Chromosome pairs' : 32,
'Protein-coding genes' : 20449,
'Genome length' : 2.5,
'Ensembl date' : new Date(2008,03),
'Cuteness factor' : 6
},
'Taeniopygia guttata' : {
'Chromosome pairs' : 40,
'Protein-coding genes' : 17488,
'Genome length' : 1.2,
'Ensembl date' : new Date(2009,03),
'Cuteness factor' : 8
},
'Gasterosteus aculeatus' : {
'Chromosome pairs' : 22,
'Protein-coding genes' : 20787,
'Genome length' : 0.46,
'Ensembl date' : new Date(2006,08),
'Cuteness factor' : 3
},
'Gallus gallus' : {
'Chromosome pairs' : 39,
'Protein-coding genes' : 15508,
'Genome length' : 1,
'Ensembl date' : new Date(2004,06),
'Cuteness factor' : 4
},
'Felis catus' : {
'Chromosome pairs' : 19,
'Protein-coding genes' : 19493,
'Genome length' : 2.5,
'Ensembl date' : new Date(2007,02),
'Cuteness factor' : 9
},
'Gorilla gorilla' : {
'Chromosome pairs' : 24,
'Protein-coding genes' : 20962,
'Genome length' : 3,
'Ensembl date' : new Date(2008,12),
'Cuteness factor' : 4
},
'Oryctolagus cuniculus' : {
'Chromosome pairs' : 22,
'Protein-coding genes' : 19293,
'Genome length' : 2.7,
'Ensembl date' : new Date(2006,08),
'Cuteness factor' : 10
},
'Meleagris gallopavo' : {
'Chromosome pairs' : 40,
'Protein-coding genes' : 14125,
'Genome length' : 1.1,
'Ensembl date' : new Date(2010,03),
'Cuteness factor' : 2
},
'Canis familiaris' : {
'Chromosome pairs' : 39,
'Protein-coding genes' : 19856,
'Genome length' : 2.4,
'Ensembl date' : new Date(2004,12),
'Cuteness factor' : 6
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment