-
Notifications
You must be signed in to change notification settings - Fork 22
/
example-different-track-heights.html
133 lines (117 loc) · 5.02 KB
/
example-different-track-heights.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
<html>
<head>
<title>pViz.js different track heights</title>
<link rel="stylesheet" type="text/css" href="deps/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="deps/pviz-core.css">
<script src="deps/pviz-bundle.min.js"></script>
<!-- just a few lines of javscript to decorate the page -->
<script src="examples-utils.js"></script>
<style type="text/css" media="screen" class='example'>
g.feature rect.coverage_bar.psm_coverage {
fill: blue;
fill-opacity: 0.4;
}
g.feature rect.coverage_bar.psm_no_coverage {
fill: red;
fill-opacity: 0.4;
}
</style>
</head>
<body class="container">
<div class="row">
<h2>pViz with different track heights example</h2>
</div>
<div id="main" class="row"></div>
<div class="row">
<h3>Comments</h3>
</div>
<script class="example">
var pviz = this.pviz;
var seq = 'MELAALCRWGLLLALLPPGAASTQVCTGTDMKLRLPASPETHLDMLRHLYQGCQVVQGNLELTYLPTNAS';
var seqEntry = new pviz.SeqEntry({
sequence : seq
});
/**
* attach a track height ratio to the category (1 is the default)
*/
pviz.FeatureDisplayer.trackHeightPerCategoryType.psms = 0.2;
pviz.FeatureDisplayer.trackHeightPerCategoryType.psms_coverage = 3;
pviz.FeatureDisplayer.setStrikeoutCategory('oups');
new pviz.SeqEntryAnnotInteractiveView({
model : seqEntry,
el : '#main'
}).render();
pviz.FeatureDisplayer.setCustomHandler(['psm_coverage', 'psm_no_coverage'], {
appender : function(viewport, svgGroup, features, type) {
var sel = svgGroup.selectAll("g.feature.internal.data." + type).data(features).enter().append("g").attr("class", "feature internal data " + type)
sel.append("rect").attr('class', function(ft) {
return 'coverage_bar ' + ft.type
})
return sel;
},
positioner : function(viewport, d3selection) {
// d3selection.attr('transform', function(ft, i) {
// return 'translate(' + + ',' + viewport.scales.y(ft.displayTrack) + ')';
// });
var w1 = viewport.scales.x(10) - viewport.scales.x(9);
var hMax = viewport.scales.y(1) * pviz.FeatureDisplayer.heightFactor('psms_coverage');
d3selection.selectAll("rect.coverage_bar.psm_coverage").attr('height', function(ft) {
return ft.coverage * hMax;
})
d3selection.selectAll("rect.coverage_bar.psm_no_coverage").attr('height', hMax);
d3selection.selectAll("rect.coverage_bar").attr('x', function(ft) {
return viewport.scales.x(ft.start - 0.5);
}).attr('width', function(ft) {
return viewport.scales.x(ft.start + 0.5) - viewport.scales.x(ft.start - 0.5);
});
return d3selection
}
});
var fts = [[0, 30], [3, 15], [10, 16], [2, 8], [35, 50], [60, 69], [60, 65], [60, 62], [61, 62], [4, 15], [7, 15], [62, 69], [40, 50], [9, 15]];
seqEntry.addFeatures(fts.map(function(ft) {
return {
//we could also use te categoryType property, for height purpose, but not grouping purpose
category : 'psms',
type : 'psm',
start : ft[0],
end : ft[1],
text : ''
}
}));
/*
* now we just compute the coverage by counting how many psms cover each amino acid
*/
var coverage = []
for ( i = 0; i < seqEntry.length(); i++) {
coverage[i] = 0;
}
var max = 0;
fts.forEach(function(ft) {
for ( i = ft[0]; i <= ft[1]; i++) {
coverage[i]++;
max = Math.max(coverage[i], max)
}
});
/*
* and ad new features for that
*/
seqEntry.addFeatures(coverage.map(function(c, i) {
return {
category : 'psms_coverage',
type : (c == 0) ? 'psm_no_coverage' : 'psm_coverage',
start : i,
end : i,
text : c,
coverage : c / max
}
}));
seqEntry.addFeatures({
category : 'oups',
type : 'oups',
start : 10,
end : 40,
text : 'oups'
});
</script>
</body>
</html>