PHYLObar was developed by Umer Zeeshan Ijaz in the following hackathon:

Event Title: WG2 hackathon: Extracting strain level variation from shotgun metagenome data
Location: Isaac Newton Institute, Cambridge, United Kingdom
Dates: from 07-11-2014 to 11-11-2014

This work was sponsored by European Union's Earth System Science and Environmental Management ES1103 COST Action ("Microbial ecology & the earth system: collaborating for insight and success with the new generation of sequencing tools").
Source code: [PHYLObar_v0.1.zip]
Download and unzip the source code, place the tree in newick format as table.nwk. The newick tree for the working example is:

((Splt088:0.46888,((((Hear083:0.00000,HearG086:0.00000):0.00155,HzS089:0.00485):0.38715,(((MacoB087:0.01679,MacoA088:0.02601):0.20130,Se067:0.26515):0.11512,Ld099:0.50138):0.05090):0.05046,((Eppo085:0.15130,Op099:0.19980):0.20097,((Ac098:0.00517,Rou095:0.00453):0.03646,Bm082:0.04564):0.23362):0.31042):0.07855):0.05634,(((Cp088:0.36147,Ado074:0.26003):0.00996,Phop080:0.34554):0.17204,(Px070:0.56592,Xc096:0.42108):0.01689):0.22328,CUN087:1.57739);

You also need to provide an annotation file as table.csv.The annotation file for the working example is:

Nodes,Q1,Q2,Q3,Q4,Q5,Q6,Q7,Q8
CUN087,35,10,4,40,20,2,53,21
Bm082,23,1,3,10,18,3,45,21
Se067,0,50,0,0,50,51,30,12

and then click on PHYLObar.html to load the tree up in your browser.

Information

- written in D3 and provides a mean to visualise a newick tree on an html page
- trees are collapsable (click on the nodes in the example given below)
- nodes also show distances in parenthesis
- any nodes can be annotated with stackedbars by providing an annotation file with a comma-separated list of quantitative measures
- legends are shown on top left
- currently there is support for only 21 quantitative measures
- unit of a quantitative measure is pixels, so you may want to scale the values in annotation file if they become huge
- current view can be exported as a png image by clicking on "Create Snapshot (PNG)" button below the tree
- to increase the size of the canvas, edit var diameter = 1600; and <canvas width="1600" height="1600" style="display:none"></canvas> in PHYLObar.html

Working example