Visualisation

Here is a minimal example of a small app that randomly reroots a starting tree. We parse a tree and use phylojs to reroot it randomly in a html widget. We use phylocanvas to visualise the tree. This example demonstrates rerooting, and connection with a plotting library such as phylocanvas.

See the Pen visualise-reroot by Leo Featherstone (@LeoFeatherstone) on CodePen.

How random rerooting works

// Randomly reroot tree on button click
function onClick() {

    // Returns an index from 1,...,nNodes (0 is the root)
    let randomIndex = Math.floor(nNodes * Math.random() + 1)

    // Select node corresponding to index
    let randomNode = tree.nodeList[randomIndex]

    tree.reroot(randomNode)

    treeVis.setProps({
        source: phylojs.writeNewick(tree)
    })

}