https://github.com/timeu/phylogram
A D3js chart for visualizing phylogetic trees
https://github.com/timeu/phylogram
Last synced: about 1 year ago
JSON representation
A D3js chart for visualizing phylogetic trees
- Host: GitHub
- URL: https://github.com/timeu/phylogram
- Owner: timeu
- License: mit
- Created: 2014-02-13T14:48:30.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2015-12-01T09:23:47.000Z (over 10 years ago)
- Last Synced: 2025-02-17T14:13:30.315Z (over 1 year ago)
- Language: JavaScript
- Size: 142 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#Phylogram
A [D3](http://d3js.org) chart for visualizing phylogetic trees.
It's based on [kueda's](https://github.com/kueda) [right angle phylograms](http://bl.ocks.org/kueda/1036776) but some additional features like:
* Iteractive [Semnatic zooming](http://bl.ocks.org/mbostock/3680957)
* 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
```Javascript
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](http://timeu.github.io/Phylogram/)
###Implementation
The implementation follows the [reusable charts](http://bost.ocks.org/mike/chart/) 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]