-
Notifications
You must be signed in to change notification settings - Fork 0
/
test_gcview.html
87 lines (84 loc) · 1.68 KB
/
test_gcview.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
<!DOCTYPE html>
<html>
<head>
<title>CGV Viewer</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cgview/dist/cgview.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cgview/dist/cgview.css">
<style>
body {
font-family: 'Helvetica', sans-serif;
}
#my-viewer {
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<div id="my-viewer"></div>
<script>
json = {
"cgview": {
"version": "1.1.0",
"sequence": {
"length": 10000
},
"features": [
{
"start": 100,
"stop": 3000,
"name": "F1",
"source": "json-feature",
"legend": "CDS"
},
{
"start": 4000,
"stop": 8000,
"name": "R1",
"source": "json-feature",
"legend": "CDS",
"strand": -1
},
{
"start": 6000,
"stop": 9000,
"name": "F2",
"source": "json-feature",
"legend": "Other"
}
],
"legend": {
"items": [
{
"name": "CDS",
"swatchColor": "rgb(230, 50, 60)",
"decoration": "arrow"
},
{
"name": "Other",
"swatchColor": "rgb(60, 150, 210)",
"decoration": "arrow"
}
]
},
"tracks": [
{
"name": "Features",
"dataType": 'feature',
"dataMethod": 'source',
"dataKeys": 'json-feature'
}
]
}
}
cgv = new CGV.Viewer('#my-viewer', {
height: 800,
width: 700,
});
cgv.io.loadJSON(json);
cgv.draw();
</script>
</body>
</html>