-
Notifications
You must be signed in to change notification settings - Fork 4
/
flu.html
272 lines (241 loc) · 18.3 KB
/
flu.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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FigTree Demo</title>
<script src="js/d3.js" charset="utf-8"></script>
<script src="js/d3-selection-multi.min.js" charset="utf-8"></script>
<style>
text {
font-family: "helvetica-neue", "helvetica", "sans-serif";
font-size: 14pt;
font-weight: 300;
}
.branch .branch-path {
fill: none;
stroke: #541753;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.branch.hovered .branch-path{
stroke-width: 4px;
}
.external-node .node-shape {
fill: #22b680;
/*stroke: rgb(255, 255, 255);*/
/*stroke-width: 1;*/
}
.external-node .node-shape.hovered {
stroke: rgb(0,0,0);
/*stroke-width: 1;*/
}
.external-node .node-shape.unselected {
fill: #22b680;
/*stroke: rgb(255, 255, 255);*/
}
.external-node .node-shape.selected {
fill: #edb23b;
/*stroke: rgb(0,0,0);*/
}
.internal-node .node-shape {
fill: #29c5ef;
/*stroke: rgb(255, 255, 255);*/
/*stroke-width: 1;*/
}
.internal-node .node-shape.hovered {
stroke: rgb(0,0,0);
}
#root .node-shape {
fill: #e31e58;
/*stroke: rgb(255, 255, 255);*/
/*stroke-width: 1;*/
}
.node-background .node-shape {
fill: rgb(255, 255, 255);
/*stroke: rgb(255, 255, 255);*/
/*stroke-width: 1;*/
}
.axis text {
font-family: "helvetica-neue", "helvetica", "sans-serif";
font-size: 12pt;
font-weight: 300;
}
.axis-label text {
font-family: "helvetica-neue", "helvetica", "sans-serif";
font-size: 12pt;
font-weight: bold;
}
#tooltip {
background: #F6EECA;
border: 1px solid #005C68;
color: #005C68;
border-radius: 5px;
padding: 5px;
font-family: "helvetica-neue", "helvetica", "sans-serif";
font-size: 12pt;
font-weight: 300;
}
</style>
</head>
<body>
<div id="tooltip" display="none" style="position: absolute; display: none;"></div>
<div>
<svg id="tree-3-svg" width="600" height="600"></svg>
<svg id="rrt-3-svg" width="600" height="600"></svg>
</div>
<style>
#tree-3-svg .node-label {
font-size: 6pt;
display: none;
}
/*#tree-3-svg .internal-node {*/
/* display: none;*/
/*}*/
#tree-3-svg .node-background {
fill: #541753;
}
#rrt-3-svg .node-background.external-node {
fill: #541753;
}
#tree-3-svg .node-background.internal-node {
display: none;
}
</style>
<script type="module">
import {Tree,FigTree,rectangularLayout,rootToTipLayout,circle,tipLabel,branch,equalAngleLayout,axis,Decoration,decimalToDate} from "./dist/figtree.esm.js";
/**
* A custom date format that converts a decimal year float into "%Y-%m-%d" format
* @param d
* @return {string}
*/
const customDateFormat =(f)=> (d) => {
const dateFormat = d3.timeFormat(f);
return `${dateFormat(decimalToDate(d))}`;
};
const formatDate = (d)=>{
const parse=d3.timeParse("%Y-%m-%d");
const format=d3.timeFormat("%b-%d");
return format(parse(d));
};
class RootToTipAnnotation extends Decoration {
constructor() {
super();
super.layer("annotation-layer")
}
create() {
const {regression} = rootToTipLayout((v) => !v.annotations.excluded)(tree);
const statsKeys = ["Slope", "X intercept", "R^2"];
const selection = this.figure().svgSelection.select(`.${this.layer()}`);
const data = [d3.format(".3e")(regression.slope), customDateFormat("%Y-%b-%d")(regression.xIntercept), d3.format(".3")(regression.rSquare)];
selection
// .append("g")
// .attr("class","trendlineStats")
// .attr("transform","translate(10,50)")
.selectAll(".rttp-statistic")
.data(statsKeys)
.join(
enter => enter
.append("text")
.attr("class", "rttp-statistic")
.attr("transform", `translate(${50},${this.figure().margins().top})`)
.style("text-anchor", "left")
.attr("alignment-baseline", "hanging")
.attr("dy", (d, i) => `${i * 1.5}em`)
.text((d, i) => `${d} : ${data[i]}`),
update => update
.call(update => update.transition()
.attr("class", "rttp-statistic")
.attr("transform", `translate(${50},${this.figure().margins().top})`)
.style("text-anchor", "left")
.attr("alignment-baseline", "hanging")
.attr("dy", (d, i) => `${i * 1.5}em`)
.text((d, i) => `${d} : ${data[i]}`))
)
}
updateCycle(selection) {
this.create()
}
}
function rootToTipStats(){
return new RootToTipAnnotation();
}
const timeTreeString =
"(DH_33_1980:0.0357241121,(((HK_1_1968:0.0190452945,BI_808_1969:0.0051286937):0.0010241727,(BI_15793_1968:0.0012510056,(BI_6449_1971:0.0033200826,((BI_21438_1971:0.0020322307,(BI_21801_1971:0.0010262679,BI_6022_1972:0.0113929685):0.0000029378):0.0041127720,((((((BI_21793_1972:0.0000023368,BI_552_1973:0.0020466900):0.0000029167,BI_23337_1972:0.0020463004):0.0020443650,BI_23290_1972:0.0010217748):0.0000020124,(BI_748_1973:0.0000023634,BI_3517_1973:0.0020477342):0.0030733203):0.0010239138,(((PC_1_1973:0.0030978238,(((BI_5930_1974:0.0010207241,BI_5931_1974:0.0000024145):0.0030692009,((BI_7398_1974:0.0000022656,BI_2813_1975:0.0000020253):0.0051598118,BI_9459_1974:0.0051458353):0.0000024293):0.0010140702,((VI_3_1975:0.0051249671,(((BI_1761_1976:0.0000029782,BI_5657_1976:0.0010188191):0.0000022297,((BI_5029_1976:0.0010188046,BI_3895_1977:0.0030726455):0.0000026451,(AM_1609_1977:0.0010192573,(RD_5828_1977:0.0031223914,RD_8179_1977:0.0051653149):0.0009892936):0.0000022168):0.0000029302):0.0000020871,BI_6545_1976:0.0000029782):0.0000021638):0.0146243715,((BI_628_1976:0.0020582540,BI_2271_1976:0.0031065744):0.0028730442,(TE_1_1977:0.0032044399,(((NL_209_1980:0.0041069801,BI_4791_1981:0.0020427797):0.0000022628,(BI_10684_1982:0.0020551307,OS_13676_1983:0.0041084161):0.0051732932):0.0042855908,(RD_577_1980:0.0042819510,((NL_233_1982:0.0010207626,(NL_241_1982:0.0040956474,PH_2_1982:0.0051325080):0.0000023735):0.0009280051,(CE_1_1984:0.0041371768,(((((GF_V728_1985:0.0000020949,WE_4_1985:0.0020517471):0.0000024396,CO_2_1986:0.0114298987):0.0020477128,(ST_10_1985:0.0030813355,(LE_360_1986:0.0030761133,CC_2_1988:0.0051782214):0.0010349701):0.0020509885):0.0000021695,((SH_11_1987:0.0020505095,((((SI_2_1987:0.0020514604,VI_1_1989:0.0000029726):0.0030722028,ST_12_1988:0.0093313842):0.0010415727,(((((AT_211_1989:0.0000020062,CA_1_1991:0.0010236343):0.0051185844,((NL_620_1989:0.0000020388,(NL_650_1989:0.0000020662,NL_738_1989:0.0010246006):0.0010241712):0.0010313893,SU_1_1990:0.0030835689):0.0010623501):0.0010186948,GU_54_1989:0.0061812860):0.0010820145,(GE_5007_1989:0.0030841916,(ME_2_1990:0.0000021943,ME_5_1990:0.0000028665):0.0052000916):0.0041542358):0.0010203375,(((((BE_352_1989:0.0030939595,BE_353_1989:0.0000023995):0.0000029006,((VI_2_1990:0.0010242678,((((((EN_260_1991:0.0000023395,((((ST_7_1992:0.0010261160,VI_68_1992:0.0020540005):0.0000021128,NL_165_1993:0.0010259388):0.0000024054,(MA_G101_1993:0.0010274493,MA_G116_1993:0.0000020181):0.0030905379):0.0010239869,((((ST_13_1992:0.0000029782,UM_1982_1992:0.0000025027):0.0000020997,UM_2000_1992:0.0010297816):0.0000022690,ES_5458_1993:0.0020591991):0.0031008027,PA_287_1993:0.0020651572):0.0020680776):0.0020598112):0.0010230023,(NL_819_1992:0.0000020332,PA_614_1992:0.0020542301):0.0020635899):0.0020600753,EN_261_1991:0.0020595584):0.0000020701,(PA_467_1992:0.0020557197,PA_583_1992:0.0020556369):0.0000022020):0.0000026915,(ES_1285_1992:0.0000027199,NL_935_1992:0.0000023228):0.0030951325):0.0041543238,((MA_G12_1991:0.0010258364,(((AM_4112_1992:0.0000000000,TI_5957_1992:0.0000000000):0.0000029782,(MA_G58_1992:0.0010267845,NI_3129_1992:0.0010251108):0.0000020890):0.0000020402,OV_31_1992:0.0000029782):0.0000023367):0.0000020296,NL_816_1991:0.0010270895):0.0041424575):0.0010053091):0.0000021644,((((((((((((((((((((((((GE_6447_1991:0.0000000000,LY_23672_1991:0.0000000000):0.0000000000,PA_457_1992:0.0000000000):0.0000000000,LY_24222_1991:0.0000000000):0.0000000000,PA_564_1992:0.0000000000):0.0000000000,PA_320_1992:0.0000000000):0.0000000000,LY_1276_1991:0.0000000000):0.0000000000,LY_24103_1991:0.0000000000):0.0000000000,PA_424_1992:0.0000000000):0.0000000000,NL_823_1992:0.0000000000):0.0000000000,FI_218_1992:0.0000000000):0.0000000000,PA_407_1992:0.0000000000):0.0000000000,PA_548_1992:0.0000000000):0.0000000000,GE_5113_1992:0.0000000000):0.0000000000,NI_3126_1992:0.0000000000):0.0000000000,PA_512_1992:0.0000000000):0.0000000000,PA_325_1992:0.0000000000):0.0000000000,HO_56941_1992:0.0000000000):0.0000000000,LY_1373_1991:0.0000000000):0.0000029782,PA_417_1992:0.0010226084):0.0000020052,(LY_1182_1991:0.0000029782,((SA_8_1992:0.0000000000,ST_8_1992:0.0000000000):0.0000020044,SA_23_1992:0.0000020240):0.0010232487):0.0000023665):0.0000022052,((((LY_1149_1991:0.0000020499,LY_1189_1991:0.0000026856):0.0010231751,SA_27_1992:0.0041051902):0.0000021533,HO_56798_1992:0.0010241579):0.0000029782,((LY_1594_1991:0.0020467613,PA_597_1992:0.0010244362):0.0000024938,PA_490_1992:0.0010242454):0.0000026698):0.0000020577):0.0000021946,(LY_1337_1991:0.0010223806,HO_56829_1992:0.0010237105):0.0000028570):0.0000020718,RD_100540_1992:0.0030794307):0.0009773017,(ST_20_1991:0.0000022249,FI_220_1992:0.0000022271):0.0041657103):0.0083621839):0.0030806322):0.0031054139,(SH_24_1990:0.0041546736,((BE_32_1992:0.0030925313,((((((FI_247_1992:0.0000022873,((SE_C273_1992:0.0010247666,(YA_56_1993:0.0010243919,(YA_61_1993:0.0000022948,YA_62_1993:0.0000029782):0.0000020187):0.0010252869):0.0000020193,(SD_9_1993:0.0030827465,SG_6_1993:0.0010246390):0.0000027354):0.0010264316):0.0000025438,ST_12_1992:0.0000022056):0.0000023482,(MA_G102_1993:0.0010259837,((MA_G130_1993:0.0000021145,SP_3_1993:0.0000029782):0.0000020123,NL_101_1993:0.0010283635):0.0000023088):0.0041170576):0.0010249289,((AK_4_1993:0.0010261646,LY_672_1993:0.0000023909):0.0030808973,(((GD_25_1993:0.0041633975,HK_2_1994:0.0051846022):0.0020456833,(((((((((((LY_1815_1993:0.0020653791,LY_22686_1993:0.0020732337):0.0010193695,SL_160_1993:0.0072620779):0.0000020966,(NL_241_1993:0.0000020563,((NL_371_1993:0.0030914397,NL_18_1994:0.0020542614):0.0000021421,((NL_372_1993:0.0010230519,EN_7_1994:0.0030963987):0.0010321112,NL_398_1993:0.0000029782):0.0000020397):0.0000020342):0.0000020437):0.0000027157,LY_23602_1993:0.0020526963):0.0000020403,OS_2219_1993:0.0041203514):0.0020533992,((((HK_1_1994:0.0000020159,HK_55_1994:0.0000029782):0.0000026107,HK_434_1996:0.0030943672):0.0020536137,(JO_33_1994:0.0010273333,((JO_47_1994:0.0041322545,HK_42_1996:0.0083786430):0.0031145043,NL_1_1995:0.0041268286):0.0000021778):0.0000021387):0.0072675988,(SA_15_1994:0.0010274340,SA_25_1994:0.0000020169):0.0041336739):0.0010321191):0.0000020194,MA_G122_1993:0.0010263934):0.0000024300,(ST_20_1993:0.0030856131,WE_59_1993:0.0041170184):0.0000028862):0.0000020719,NL_179_1993:0.0000029782):0.0000023886,(MA_G252_1993:0.0030998923,(HK_56_1994:0.0020649185,((FI_338_1995:0.0020593381,(GE_A9509_1995:0.0000029782,(HK_3_1995:0.0010276609,HK_38_1995:0.0041329527):0.0000020066):0.0010312685):0.0020691684,((((FI_339_1995:0.0010286485,(FI_381_1995:0.0000029782,(LY_2279_1995:0.0041290860,(VI_75_1995:0.0010306781,NL_91_1996:0.0010276415):0.0010328447):0.0000025645):0.0000021235):0.0010252963,NL_271_1995:0.0041641349):0.0020769752,(HK_32_1995:0.0020619614,HK_49_1995:0.0000020783):0.0010296824):0.0010317113,((HK_55_1995:0.0020611078,((GE_3958_1996:0.0010289234,SP_1_1996:0.0020665202):0.0010279084,((HK_20_1996:0.0062928957,((HK_357_1996:0.0020833160,((((AU_10_1997:0.0010293548,SY_5_1997:0.0031192534):0.0010309721,NL_300_1997:0.0031125120):0.0010359141,NL_414_1998:0.0020663677):0.0000025120,((NL_427_1998:0.0052168793,NL_462_1998:0.0041788818):0.0009989061,(MW_10_1999:0.0063100940,(((((NL_301_1999:0.0021066652,NL_126_2001:0.0051834380):0.0010260360,((FU_411_2002:0.0020941359,(((FI_170_2003:0.0010327937,NL_222_2003:0.0020688773):0.0000024856,NL_213_2003:0.0000029782):0.0010333055,NL_217_2003:0.0000020169):0.0020690562):0.0019846000,NL_22_2003:0.0053123680):0.0206296113):0.0010636175,((NL_118_2001:0.0020613345,NL_1_2002:0.0020625301):0.0000021644,(NL_120_2002:0.0020690091,NL_20_2003:0.0073327455):0.0020657880):0.0062384482):0.0000025490,PM_2007_1999:0.0020671686):0.0015269726,(NL_3_2000:0.0036250820,NL_124_2001:0.0078713835):0.0031777430):0.0047800231):0.0009753439):0.0010363885):0.0073222451):0.0010180374,HK_358_1996:0.0010286480):0.0031617505):0.0020250628,((LY_1781_1996:0.0020577498,NE_491_1997:0.0010385149):0.0041603328,(((HK_1_1997:0.0020598402,OS_21_1997:0.0010300669):0.0000022287,(JO_10_1997:0.0083362953,OS_244_1997:0.0020724878):0.0010276096):0.0020598963,(HK_280_1997:0.0093842809,NL_5_1998:0.0093823687):0.0000022687):0.0010405634):0.0010167539):0.0000029414):0.0000028376):0.0010060621,(NA_933_1995:0.0020747432,(WU_359_1995:0.0010428156,BR_8_1996:0.0061896421):0.0010351449):0.0010368642):0.0083935090):0.0000025562):0.0083615515):0.0031201121):0.0000020041):0.0000029782,MA_G109_1993:0.0010265826):0.0000024206):0.0030836172,(NL_115_1993:0.0000022768,NL_126_1993:0.0000022767):0.0051718111):0.0000026159):0.0010242886):0.0010346744,(((LY_1803_1993:0.0062355849,OS_2352_1993:0.0031447166):0.0020357816,(((NL_357_1993:0.0020633878,NL_399_1993:0.0020749357):0.0010200887,NL_440_1993:0.0000020335):0.0010271522,VI_104_1993:0.0020529997):0.0000020333):0.0010037085,SL_142_1993:0.0041594905):0.0041543519):0.0010198587,(NL_3_1993:0.0000022302,NL_17_1993:0.0010248430):0.0020530926):0.0010339996):0.0052168953,NL_938_1992:0.0041709067):0.0020053952):0.0041891867):0.0020532954,((SP_34_1989:0.0000021853,SP_36_1989:0.0000020222):0.0010239443,(((SP_35_1989:0.0000000000,WE_5_1989:0.0000000000):0.0000020107,SP_40_1989:0.0000020107):0.0010255333,SP_53_1989:0.0010237575):0.0000026841):0.0010222101):0.0010383200,HK_1_1989:0.0041226930):0.0010174769):0.0093491695):0.0000020736,VI_7_1987:0.0010218282):0.0000021738):0.0020638845,(EN_427_1988:0.0105315287,NL_450_1988:0.0074005591):0.0019484583):0.0030875278):0.0051869890,NL_330_1985:0.0083586035):0.0030566680):0.0063375309):0.0093671719):0.0009302581):0.0156290588):0.0117418143):0.0065972263):0.0042496516):0.0051932273):0.0041128852,BI_5146_1974:0.0102949315):0.0011883598,BI_2600_1975:0.0168404818):0.0010125888):0.0073002860,EN_42_1972:0.0041109252):0.0073684101):0.0081088962):0.0020460880):0.0018203803):0.0000029450,HK_107_1971:0.0145883210):0.0010422779,((BI_16190_1968:0.0000029782,BI_16398_1968:0.0000029782):0.0000020863,(BI_908_1969:0.0010209579,(BI_17938_1969:0.0010225618,(BI_93_1970:0.0041278171,BI_2668_1970:0.0030921097):0.0010095139):0.0010228619):0.0020451430):0.0009970665);";
const tree = Tree.parseNewick(timeTreeString, {datePrefix: "_"});
const treeSVG = document.getElementById('tree-3-svg');
const margins = { top: 10, bottom: 60, left: 100, right: 50};
const figTree = new FigTree(treeSVG, margins, tree)
.layout(rectangularLayout)
.nodes(
circle()
.filter(d=>!d.children)
.attr("r",d=>d.annotations.hovered?4:2)
.annotateOnClick("excluded")
.annotateOnHover("hovered"),
)
.nodeBackgrounds(
circle()
.filter(d=>!d.children)
.attr("r",d=>d.annotations.hovered?5:4),
)
.branches(
branch()
)
.feature(
axis()
.location("bottom")
.y(600-margins.top-margins.bottom+5)
.x(0)
.title({text:"Divergence",
yPadding:30})
.tickFormat(d3.format(".2f"))
.ticks(4)
);
// tree.order(tree.rootNode, false);
const rttpLayout = rootToTipLayout((v)=>!v.annotations.excluded);
const rootToTipPlot = new FigTree(document.getElementById('rrt-3-svg'), margins,tree)
.layout(rttpLayout)
.nodes(
circle()
.filter(d=>!d.children)
.attr("r",d=>d.annotations.hovered?2:1)
.annotateOnClick("excluded")
.annotateOnHover("hovered"),
)
.nodeBackgrounds(
circle()
.filter(d=>!d.children)
.attr("r",d=>d.annotations.hovered?3:2),
)
.branches(
branch()
.curve(d3.curveBasis)
.hilightOnHover()
)
.feature(
axis()
.location("bottom")
.y(600-margins.top-margins.bottom+5)
.x(0)
.title({text:"Date",
yPadding:30})
.tickFormat(customDateFormat("%Y"))
)
.feature(
axis()
.location("left")
.y(0)
.x(-5)
.title({text:"Divergence",
xPadding:-80,
rotation:-90})
.tickFormat(d3.format(".3f"))
.ticks(4)
)
.feature(
rootToTipStats()
)
</script>
</body>
</html>