Collapsible nodes

README.md

Example of TnT Tree. Click on the nodes to collapse / uncollapse them

collapse_nodes.js

var collapse_nodes = function(div) {

    var newick = "(Loxosceles_griswold:0.12326967676567740506,((Diguetia_sp:0.18340142671305392774,(Pholcus_phalangioides:0.09923952797393011116,Pholcus_griswold:0.14291162236497351179):0.07157276489948675990):0.03796924680464557750,(((((((Oecobius_navus:0.14864469411008110478,(Uloborus_sp:0.04812498270092351038,Philopenella_herediae:0.04446574016759030634):0.13477245924766939611):0.01802328106427702331,(Deinopis_longipes:0.11876176419584029420,(((Amaurobius_ferox:0.07118578655068578953,Callobius_sp:0.05339731994949307309):0.05219269479385474364,((Cicurina_vibora:0.08928112319524525442,Calymmaria_persica:0.08985108695077383134):0.03783312821367939421,((Badumna_longinquus:0.07787210455607310178,(Amphinectid_sp:0.04117725877373627080,Metaltella_simoni:0.04808395776672168970):0.03552824408474966611):0.03064642817164417443,Agelenopsis_emertoni:0.09028530069200794983):0.00894299713603568212):0.01461475979594547246):0.01598134907074658453,(Homalonychus_theologus:0.10503036666318213421,((Thomisidae_sp:0.12454296151862459530,((Peucetia_longipalpis:0.07305564648719332921,Anahita_punctulata:0.07283259534079515596):0.01317972100212693419,(Schizocosa_rovneri_like:0.07429795487097909379,(Pisaurina_mira:0.07095593710519394748,Dolomedes_triton:0.05650323613802637340):0.00934198183550962770):0.01481175630007462544):0.00876056040192507018):0.02114094089581976602,(Habronattus_signatus:0.12679620769735891472,(Anyphaenid_sp:0.10188560444566696628,(Sergiolus_capulatus:0.07243907741060641448,Trachelas_tranquillus:0.11715114134034620985):0.01694637553036998714):0.01237130428289015538):0.01504425539189648345):0.01525861093170017245):0.01160206321207290364):0.06045667150438461396):0.01343264202667448018):0.01229361822128003691,((((((((Macracantha_arcuata:0.03190451645474361858,Gasteracantha_hasselti:0.03056493012654030311):0.05613263172825147529,Neoscona_arabesca:0.06674240223033596486):0.01317490194099752397,(Micrathena_gracilis:0.05049167350202589388,Verrucosa_arenata:0.05551697302039034637):0.02331198275073288403):0.04601233238370708301,Nephila_clavipes:0.10882276957726816358):0.04730155734175698484,((Frontinella_communis:0.12593565371021775423,Pimoidae_sp:0.11255053799994087227):0.02514526810646569924,Nesticus_cooperi:0.12522930863202086371):0.01423528440753832683):0.01341569638731487241,(Microdipoena_guttata:0.28829277729734192892,((Tetragnatha_versicolor:0.13666346101425289050,Leucauge_venusta:0.08505361201709486785):0.03864368684575909124,Ero_leonina:0.11798431625982011561):0.02186083376933681266):0.01599533357291535104):0.02859765862175086409,(Theridion_sp:0.13164494378992347423,Latrodectus_tredecimguttatus:0.11547623570841988871):0.06875933603627490398):0.03147604375220310752,Stegodyphus_mimosarum_genome:0.17169622891313052193):0.00978477363768269319):0.05642664018983265667,Leptoneta_griswold:0.18732253430099560232):0.07895399857489314444,(((Liphistius_sp:0.06512817496016977403,Liphistius_malayensis:0.06391058974219146482):0.10387033363431306954,((Mastigoproctus_giganteus:0.23578245117165982925,Damon_variegatus:0.21444401582818975460):0.04578285191526225428,(Centruroides_vittatus:0.25408687875727392624,(Ixodes_scapularis:0.45878989309566159394,Tetranychus_cinnabarinus:0.79868530509276847162):0.04827596205019370895):0.04161236941913775550):0.07731362035163949487):0.04689320386543164437,(((Aliatypus_coylei:0.05420407054342384762,Antrodiaetus_unicolor:0.05167774138582346966):0.04401594373874331834,(Megahexura_fulva:0.11029600603675217274,Sphodros_rufipes:0.10735532241757311800):0.01439348425778941981):0.09134307151962343940,(Microhexura_montivaga:0.14131049470855372441,((Nemesiid_sp:0.07172141520374894497,(Trichopelma_laselva:0.05760072659901398218,(Aphonopelma_iviei:0.03018534920963696078,Acanthoscurria_geniculata:0.05093093081368755409):0.02059712442726103696):0.03182650358101840604):0.01632735037672402093,(((Idiops_bersebaensis:0.09766681326317017131,(Promyrmekiaphila_clathrata:0.05948064197830505578,(Aptostichus_stephencolberti:0.03071728370026079180,Aptostichus_atomarius:0.01549250885699647758):0.02823311710055149970):0.01826080098140239055):0.00719361012361621841,(Cyclocosmia_truncata:0.07287126088391573941,Hebestatis_theveneti:0.05206917691459882896):0.01670388823820393581):0.01072797467654923800,(Paratropis_sp:0.08466696082572773563,(Pionothele_nsp:0.05780088454196279091,Brachythele_longitarsus:0.05689592758803772160):0.02079017206838785006):0.00901144387904639736):0.01017781263289632351):0.02695918757456965131):0.07691732430521869279):0.04051390301909548602):0.03776818425273577307):0.02800562453924206399,(Hypochilus_pococki:0.14554949994411969794,Kukulcania_hibernalis:0.16206624669187383314):0.02656087001744673881):0.04580845408562908561,(Calponia_harrisonfordi:0.18095845360454987372,(Dysdera_crocata:0.16377060937914983407,Segestria_sp:0.15352650649658552973):0.05468272319611894305):0.02301436789294050711):0.02631100490603415984):0.06100264947873403759,Scytodes_thoracica:0.18428710621251920276):0.0;";

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

    // Show different node shapes for collapsed/non-collapsed nodes
    var node_size = 14;
    var node_fill="lightgrey";
    var node_stroke="black";

    var expanded_node = tnt.tree.node_display.circle()
        .size(node_size)
        .fill(node_fill)
        .stroke(node_stroke);

    var collapsed_node = tnt.tree.node_display.triangle()
        .size(node_size)
        .fill(node_fill)
        .stroke(node_stroke);

    var node_display = tnt.tree.node_display()
        .size(24)
        .display (function (node) {
            if (node.is_collapsed()) {
                collapsed_node.display().call(this, node);
            } else {
                expanded_node.display().call(this, node);
            }
        });

    var tree = tnt.tree()
        .node_display(node_display)
        .data(data)
        .duration(500)
        .layout(tnt.tree.layout.vertical()
            .width(600)
            .scale(false)
        );

    tree.on ("click", function(node){
        node.toggle();
        tree.update();
    });

    // The tree renders at this point
    tree(div);
};

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="http://tntvis.github.io/tnt.tree/build/tnt.tree.css" type="text/css" />
    <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="collapse_nodes.js"></script>
</head>

<body>
    <div id="mydiv"></div>

    <script>
    collapse_nodes(document.getElementById("mydiv"));
    </script>
</body>

thumbnail.png