forked from vidjil/vidjil
-
Notifications
You must be signed in to change notification settings - Fork 0
/
small_example.html
113 lines (91 loc) · 4.2 KB
/
small_example.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
<!doctype html>
<!--
This file is part of "Vidjil" <http://bioinfo.lille.inria.fr/vidjil>, V(D)J repertoire browsing and analysis
Copyright (C) 2013, 2014 by Marc Duez <marc.duez@lifl.fr> and the Vidjil Team
Bonsai bioinformatics at CRIStAL (UMR CNRS 9189, Université Lille) and Inria Lille
"Vidjil" is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
"Vidjil" is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with "Vidjil". If not, see <http://www.gnu.org/licenses/>
-->
<html>
<head>
<meta charset="utf-8">
<link id="palette" rel="stylesheet" type="text/css" href="css/light.css" />
<script type="text/javascript">
//vidjil file (json format)
var vidjil_file = {
"vidjil_json_version": ["2014.09"],
"reads": {
"segmented": [105, 32],
"total": [110, 40],
"germline": {"TRG": [100, 30], "IGH": [10, 7]}
},
"samples": {
"timestamp": ["2014-10-20 13:59:02", "2014-10-25 14:00:32"],
"number": 2,
"original_names": ["Diag.fa", "Fu-1.fa"]},
"clones": [
{ "id" : "clone-001",
"sequence" : "AGCTGGACGACTCGGCCCTGTATCTCTGTGCCAGCACCCGAGGGGACAGTAGAAACTAATGAAAAACTGTTTTTTGGCAGT",
"name" : "CASTRGDSRN**KTVF TRBV5-4 TRBJ1-4",
"reads" : [10, 5],
"top" : 1,
"germline" : "TRB",
"seg" : { "5" : "TRBV5-4", "3" : "TRBJ1-4" }
},
{ "id" : "clone-002",
"sequence" : "GATACAGATCAGATCAGTACAGATACAGATACAGATACA",
"name" : "Test 2",
"reads" : [20, 20],
"top" : 2,
"germline" : "TRG"
},
{ "id": "clone-003",
"sequence": "CTCATACACCCAGGAGGTGGAGCTGGATATTGATACTACGAAATCTAATTGAAAATGATTCTGGGGTCTATTACTGTGCCACCTGGGCCTTATTATAAGAAACTCTTTGGCAGTGGAAC",
"reads" : [ 75, 5],
"germline": "TRG",
"top": 3,
"seg":
{
"5": "TRGV5*01", "5start": 0, "5end": 86,
"3": "TRGJ1*02", "3start": 89, "3end": 118,
"cdr3": { "start": 77, "stop": 104, "seq": "gccacctgggccttattataagaaactc" }
}
}]
}
//build the interface using vidjil API
function main () {
//override server config
config = undefined
//create model
m = new Model();
//bind views
gr = new Graph("div1", m)
sp1 = new ScatterPlot("div2", m)
sp2 = new ScatterPlot("div3", m)
//load vidjil file (will be simplified soon ..)
m.parseJsonData(vidjil_file,100)
m.loadGermline()
m.initClones()
//some interaction
m.changeColorMethod('V')
sp1.changeSplitMethod("sequenceLength", "gene_v", "bar")
};
</script>
</head>
<body>
<div style="width:100%; height:100%;">
<div id="div1" style="border:solid; margin-left:20%; width:80%; height:33%;"></div>
<div id="div2" style="border:solid; margin-left:10%; width:80%; height:33%;"></div>
<div id="div3" style="border:solid; width:80%; height:33%;"></div>
</div>
</body>
<script data-main="js/app.js" src="js/lib/require.js"></script>
</html>