-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathphylogram.html
114 lines (101 loc) · 3.91 KB
/
phylogram.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta content='text/html;charset=UTF-8' http-equiv='content-type'>
<title>Right-angle phylograms and dendrograms with d3</title>
<head>
<link rel="stylesheet" type="text/css" href="/css/tipsy.css">
<link rel="stylesheet" type="text/css" href="/css/foundation.min.css">
<script src="/js/jquery-1.9.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/js/d3.layout.min.js"></script>
<script src="/js/tipsy.js"></script>
<script src="/js/d3.phylonator.js"></script>
<script src="/js/newick.js"></script>
<script>
function load() {
var newick = Newick.parse("((A7RLM8:0.6571,(B3SBJ1:0.60468,B3SB47:1.39873):0.32942):0.0564,(C3YZV6:0.63868,(B7PB18:1.48452,((Q9I9H8:0.00775,A5WVJ8:0.00101):0.44669,(Q6GNU6:0.41674,((E1BR73:0.00015,E1BS49:0.00017):0.26544,((D2HE46:0.04922,(O14727:0.00017,A7E2A2:0.00089):0.05297):0.02176,((O88879:0.0026,(A2RRK8:0.00015,Q5DU30:0.00088):0.00017):0.02035,(Q8VI66:0.00344,(D3ZA56:0.09057,Q9EPV5:0.00017):0.00098):0.02368):0.0708):0.15795):0.09069):0.11555):0.43916):0.18436):0.11567):0")
var newickNodes = []
function buildNewickNodes(node, callback) {
newickNodes.push(node)
if (node.branchset) {
for (var i = 0; i < node.branchset.length; i++) {
buildNewickNodes(node.branchset[i])
}
}
}
buildNewickNodes(newick)
d3.phylonator.build('#phylogram', newick, {
width: 800,
height: 600,
skipTicks: true
});
$('#preview').click(function (e) {
var html = d3.select("svg")
.attr("title", "test2")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;
d3.select("#svg-opts").append("a")
.attr("class", "tiny secondary button")
.attr("id", "download")
.html("Download")
.attr("target", "_blank")
.attr("href", "data:image/svg+xml;base64," + btoa(html));
});
}
$(document).ready(function () {
d3.select("#clear").on('click', function () {
var vis = d3.select("svg");
vis.selectAll("path.link")
.attr("stroke", "#aaa");
});
document.getElementById('file').addEventListener('change', readFile, false);
function readFile(evt) {
var files = evt.target.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function () {
var newick = Newick.parse(this.result);
console.log(newick);
var newickNodes = []
function buildNewickNodes(node, callback) {
newickNodes.push(node)
if (node.branchset) {
for (var i = 0; i < node.branchset.length; i++) {
buildNewickNodes(node.branchset[i])
}
}
}
buildNewickNodes(newick)
d3.select('svg').remove();
d3.phylonator.build('#phylogram', newick, {
width: 800,
height: 600,
skipTicks: true
});
}
reader.readAsText(file);
}
});
</script>
</head>
<body onload="load();">
<nav class="top-bar"><ul class="title-area">
<li class="name">
<h1><a href="#">Phylonator.js</a></h1>
</li>
</ul>
</nav>
<div class="row">
<div class="large-12 columns">
<div class="large-4 columns" id="svg-opts">
<input type="file" id="file" name="file" enctype="multipart/form-data"/>
<input type='button' class="tiny button" value="Clear" id='clear'></input>
<input type='button' class="tiny button" value="Preview" id='preview'></input>
</div>
<div id='phylogram'> </div>
</div>
</div>
</body>
</html>