emepyc/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Example of displaying a subtree using TnT Tree

  
## index.html
<!DOCTYPE html>

<head>
    <!-- D3 -->
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <!-- TnT -->
    <link rel="stylesheet" href="http://tntvis.github.io/tnt.tree/build/tnt.tree.css" />
    <script src="http://tntvis.github.io/tnt.tree/build/tnt.tree.min.js"></script>
</head>

<body>
    <input type=button value="Get subtree" onclick="switchTree()"></input>
    <div id="mydiv"></div>
    <script>
    var newick = "(((Crotalus_oreganus_oreganus_cytochrome_b:0.00800,Crotalus_horridus_cytochrome_b:0.05866):0.04732,(Thamnophis_elegans_terrestris_cytochrome_b:0.00366,Thamnophis_atratus_cytochrome_b:0.00172):0.06255)internal:0.00555,(Pituophis_catenifer_vertebralis_cytochrome_b:0.00552,Lampropeltis_getula_cytochrome_b:0.02035):0.05762,((Diadophis_punctatus_cytochrome_b:0.06486,Contia_tenuis_cytochrome_b:0.05342):0.01037,Hypsiglena_torquata_cytochrome_b:0.05346):0.00779);";

    var tree_vis = tnt.tree()
        .data(tnt.tree.parse_newick(newick));

    tree_vis.layout()
        .width(800)
        .scale(true);

    tree_vis.label()
        .height(20);

    tree_vis.node_display()
        .fill("steelblue");

    tree_vis.label()
        .color("steelblue");

    tree_vis(document.getElementById("mydiv"));


    var root = tree_vis.root(); // The root node of the full tree
    var node = root.find_node_by_name("internal"); // The root node of the sub tree
    var subtree = root.subtree(node.get_all_leaves()); // The subtree
    var treeIsFull = true; // We switch between full tree and partial tree displays. At start it is full
    function switchTree() {
        treeIsFull = !treeIsFull;
        if (treeIsFull) {
            tree_vis.data(root.data());
            tree_vis.update();
            // Change the label in the button
            d3.select("input").attr("value", "Get subtree");
        } else {
            tree_vis.data(subtree.data());
            tree_vis.update();
            // Change the label in the button
            d3.select("input").attr("value", "Get full tree");
        }
    }
    </script>

</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>

	<head>
	<!-- D3 -->
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

	<!-- TnT -->
	<link rel="stylesheet" href="http://tntvis.github.io/tnt.tree/build/tnt.tree.css" />
	<script src="http://tntvis.github.io/tnt.tree/build/tnt.tree.min.js"></script>
	</head>

	<body>
	<input type=button value="Get subtree" onclick="switchTree()"></input>
	<div id="mydiv"></div>
	<script>
	var newick = "(((Crotalus_oreganus_oreganus_cytochrome_b:0.00800,Crotalus_horridus_cytochrome_b:0.05866):0.04732,(Thamnophis_elegans_terrestris_cytochrome_b:0.00366,Thamnophis_atratus_cytochrome_b:0.00172):0.06255)internal:0.00555,(Pituophis_catenifer_vertebralis_cytochrome_b:0.00552,Lampropeltis_getula_cytochrome_b:0.02035):0.05762,((Diadophis_punctatus_cytochrome_b:0.06486,Contia_tenuis_cytochrome_b:0.05342):0.01037,Hypsiglena_torquata_cytochrome_b:0.05346):0.00779);";

	var tree_vis = tnt.tree()
	.data(tnt.tree.parse_newick(newick));

	tree_vis.layout()
	.width(800)
	.scale(true);

	tree_vis.label()
	.height(20);

	tree_vis.node_display()
	.fill("steelblue");

	tree_vis.label()
	.color("steelblue");

	tree_vis(document.getElementById("mydiv"));


	var root = tree_vis.root(); // The root node of the full tree
	var node = root.find_node_by_name("internal"); // The root node of the sub tree
	var subtree = root.subtree(node.get_all_leaves()); // The subtree
	var treeIsFull = true; // We switch between full tree and partial tree displays. At start it is full
	function switchTree() {
	treeIsFull = !treeIsFull;
	if (treeIsFull) {
	tree_vis.data(root.data());
	tree_vis.update();
	// Change the label in the button
	d3.select("input").attr("value", "Get subtree");
	} else {
	tree_vis.data(subtree.data());
	tree_vis.update();
	// Change the label in the button
	d3.select("input").attr("value", "Get full tree");
	}
	}
	</script>

	</body>