-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcoalescent.html
136 lines (109 loc) · 4.05 KB
/
coalescent.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Coalescent Histories in a Population</title>
<!-- d3 library for data visualization and animation -->
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<!-- jstat library for probability distributions -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js"></script>
<!-- phyleaux library for phylogenetic objects and functions -->
<script type="text/javascript" src="https://jembrown.github.io/phyleaux.js"></script>
<style type="text/css">
@font-face { font-family: Glober; font-weight: semibold; src: url('Glober-SemiBold.otf'); }
h1 {
font-family: Glober;
font-size: 24px;
}
p {
font-family: Glober;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Coalescent Histories In a Population</h1>
<section id="controls">
<form id="popSize">
Population Size: <input type="text" id="popSizeValue" size=10>
</form>
<br>
<form id="sampSize">
Sample Size: <input type="text" id="sampSizeValue" size=10>
</form>
<br>
<form id="numGens">
Number of Generations: <input type="text" id="numGensValue" size=10>
</form>
<br>
<button id="redraw"
style="display: inline-block; text-align: right">Redraw
</button>
</section>
<br>
<section id = "visualization">
<script>
// Setting coalescent defaults
var popSize = 10;
var nGens = 20;
var sampleSize = 10;
// Setting plotting defaults
var svgWidth = popSize * 45;
var svgHeight = nGens * 30;
var padding = 15;
// Adding defaults to input text boxes
d3.select("#popSizeValue").property("value",popSize);
d3.select("#sampSizeValue").property("value",sampleSize);
d3.select("#numGensValue").property("value",nGens);
function doTheCoalescent(){
d3.selectAll("svg").remove();
popSize = parseInt(d3.select("#popSizeValue").property("value"));
nGens = parseInt(d3.select("#numGensValue").property("value"));
sampleSize = parseInt(d3.select("#sampSizeValue").property("value"));
var myCoalHist = new coalescentHistory(popSize,
nGens,
sampleSize);
myCoalHist.sampleHistory();
svgWidth = popSize * 45;
svgHeight = nGens * 30;
myCoalHist.drawSortedHistory(svgWidth,svgHeight,padding,"#visualization");
}
doTheCoalescent();
// The next 3 event listeners just keep the text forms from reverting
// to default values when the user presses enter.
var popSizeForm = document.getElementById("popSize");
popSizeForm.addEventListener("submit",function(event){
event.preventDefault();
});
var sampSizeForm = document.getElementById("sampSize");
sampSizeForm.addEventListener("submit",function(event){
event.preventDefault();
});
var numGensForm = document.getElementById("numGens");
numGensForm.addEventListener("submit",function(event){
event.preventDefault();
});
d3.select("#redraw")
.on("click",function(){
sampleSize = parseInt(d3.select("#sampSizeValue").property("value"));
popSize = parseInt(d3.select("#popSizeValue").property("value"));
if (sampleSize > popSize){
alert("Sample size cannot be greater than the population size.")
} else {
doTheCoalescent();
}
});
</script>
</section>
<br><br>
<section id="pageCredits">
<p>
<img width=100 height=100 src="https://raw.githubusercontent.com/jembrown/websiteImages/master/ssb.png">
<br><br>
Development of the Phyleaux Javascript Library and related interactive phylogenetics tools is supported by the Society of Systematic Biologists.
<br><br>
Comments and bug reports should be directed to [email protected].
</p>
</section>
</body>
</html>