timeu / Phylogram

A D3js chart for visualizing phylogetic trees

#Phylogram

A D3 chart for visualizing phylogetic trees.

It's based on kueda's right angle phylograms but some additional features like:

• Iteractive Semnatic zooming
• Visualizing meta-information (quantitive and categorical)
• Support for tooltip and mouseover functionality

Phylogram requires two input data sets:

1. Tree structure as a nested list.
2. Meta-information as a lookup map.

Simple Example

var data = [
            {'name':'node1',
             'branchset':[
                {'name':'subnode1',
                 'branchset':[
                    {'name':'leafNode1'},
                    {'name':'leafNode2']
                  ]
                },
                {'name':'subnode2',
                 'branchset':[]
                }
              ]
            }
          ];

var meta = {'leafNode1':
              {'country':'AUS','size':10},
            'leafNode2':
              {'country':'USA','size':20}
           };
var chart = phylogram().width(800).height(800)lookupMap(meta);

d3.select('#chart')
		.selectAll('svg')
		.data([data])
		.enter()
		.append('svg')
		.call(chart);

DEMO

###Implementation

The implementation follows the reusable charts convention proposed by Mike Bostock

##Configuration

The chart can be configured in a number of ways (The default value is bold):

• isRadial: Render a circular Dendrogram instead of a linear Phylogram [false, true]
• orientation: The orientiation of the chart [LEFT, BOTTOM, TOP, RIGHT]