-
Notifications
You must be signed in to change notification settings - Fork 3
/
2019_2_17ideogram.html
267 lines (234 loc) · 8.9 KB
/
2019_2_17ideogram.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
<!DOCTYPE html>
<html>
<head>
<script src="/includes/head.js"></script>
<title>Ideogram学习</title>
</head>
<body>
<div class="container">
<h1>Circos中ideogram中的意义</h1>
<article>
<h2>ideogram有着不同的意义；chromosomes是karyotype文件中的染色体；而ideogram则是展示染色体的一部分区域，或者完整的一条染色体</h2>
<ul>
<li>它是circos图片中的轴</li>
<li>在生物学的内容上可以是染色体chromosomes、 拼装的contig序列或者是clone片</li>
<li>在karyotype的数据文件中，定义了每个轴，它们有不同的id、不同的名字label;有着大小([0-100000])和颜色属性</li>
</ul>
<p>
<h3>它主要的格式例如</h3>
<pre id="format" style="display: none;">
chr - ID LABEL START END COLOR
</pre>
<script>
sourceCodeById("format");
</script>
<p>
前面两个字段chr和-总是固定的，
<br>
id字段是用来表明这个chr的身份的
<br>
label字段则是用来在图片上进行表示的文字信息
<br>
start和end在keryotype中尽量覆盖全长，而在其他的conf文件中来控制它的画出来的长度
</p>
<hr>
<h3>除了chromosomes的数据类型还存在着band类型</h3>
<pre id="bandformat" style="display: none;">
band hs1 p36.33 p36.33 0 2300000 gneg
band hs1 p36.32 p36.32 2300000 5300000 gpos25
band hs1 p36.31 p36.31 5300000 7100000 gneg
...
band hs2 p25.3 p25.3 0 4300000 gneg
band hs2 p25.2 p25.2 4300000 7000000 gpos50
band hs2 p25.1 p25.1 7000000 12800000 gneg
</pre>
<script> sourceCodeById("bandformat");</script>
<p>
与chromosomes的数据定义类似，只不过前两列是band和对应的父染色体的id名
<br>
接着就是band的id编号与label名称，以及坐标和颜色信息
</p>
当然Circos官网还给出了许多可以参考的图片，用到你的数据中
<a href="http://circos.ca/images/scientific_literature/"> published examples from the literature</a>
</p>
<h1>直接看一下band的具体效果是什么样子吧！</h1>
<img src="./image/band.svg" alt="" width="80%">
<pre id="band" style="display: none;">
<ideogram>
<spacing>
default=0.05r
<spacing>
radius=0.9r
thickness=30p
fill=yes
stroke_color=dgrey
stroke_thickness=2p
show_label=yes
label_font=default
label_radius=1.1r
label_size=30
label_parallel=yes
show_bands=yes
fill_bands=yes
band_stroke_thickness=2p
band_stroke_color=white
band_transparency=4
<ideogram>
</pre>
<script>sourceCodeById("band");</script>
<h1>关于染色体的过滤选项filtering</h1>
<p>
主要使用到chromosomes和chromosomes_display_default两个参数
当chromosomes_display_default=yes的时候，默认是展示karyotype中的所有染色体
<br>
当为no的时候，就可以结合chromosomes参数自定义选择要展示染色体
</p>
下面是几种常见的过滤方式
<pre id="filter" style="display: none;">
chromosomes_display_default=no
chromosomes=/hs[1-4]$/
</pre>
<script>sourceCodeById("filter")</script>
使用-号排除不需要展示的ideogram
<pre id="filter2" style="display: none;">
chromosomes=-hs1;-hs2;-hs3;
chromosomes_display_default=yes
</pre>
<script>sourceCodeById("filter2")</script>
<h1>修改ideogram的出现顺序</h1>
<ul>
<li>直接指定绝对的顺序，也就是把所有的ideogram都排好序，写上</li>
<li>相对顺序，只指定单个锚，然后调整其他ideogram的顺序</li>
</ul>
绝对顺序的就不做延伸了，来了解一下相对顺序吧
<pre id="order1" style="display: none;">
chromosomes = hs1;hs2;hs3;hs4;hs5;hs6;hs7;hs8
chromosomes_order = hs5,hs4
这种将会展示的顺序为1、2、3、6、5、4、7、8
</pre>
<script>sourceCodeById("order1")</script>
<br>
这是因为hs5作为锚固定在整个字符的第5位，而要让hs4在其后则需要交换hs4和hs6的位置
<pre id="order2" style="display: none;">
chromosomes_order = hs3,-,hs2
这种将会展示的顺序为4、5、3、1、2、6、7、8
</pre>
<script>sourceCodeById("order2");</script>
同样hs3固定在第3号位置
<br>这个的实现原理则是先把3和2确定后在填充-符，并且一次从hs3前填充两个字符，剩下的都填写到hs2后面
另一种类似于正则表达式
<pre id="order3" style="display: none;">
chromosomes_order = ^,hs5
显示的顺序为5,1,2,3,4,6，7,8
chromosomes_order = hs5,$
显示顺序为1,2,3,4,6，7,8，5
</pre>
<script>sourceCodeById("order3");</script>
<h1>具体的的顺序实现效果</h1>
<img src="./image/order.svg" alt="" width="80%">
<pre id="order" style="display: none;">
chromosomes_radius=/hs[1-7]$/:0.9r,hs8:0.8r
chromosomes_scale=hs1=0.3r,/hs[2-8]$/=0.7rn
chromosomes_order=hs3,-,hs5
果然顺序是顺时针的2、4、3、1、5、6、7、8
</pre>
<script>
sourceCodeById("order");
</script>
<h1>对ideogram进行修剪</h1>
<p>
主要使用chromosomes=hs1:0-100
<br>
和chromosomes_breaks=-hs1:25-75;hs2:25-75;
<br>
接下来主要就是关于break这条线的修饰
它会放在ideogram的spacing标签内，做为一类分割线
</p>
<h2>效果图：</h2>
<img src="./image/cropping.svg" width="80%" alt="">
<pre id="cropping" style="display: none;" >
#用于修剪 ideogram
chromosomes=hs1:0-100;hs2:0-100;hs3:0-100;hs4:0-100;hs5;hs6;hs7;hs8
chromosomes_breaks=-hs1:25-75;-hs2:10-50;
<spacing>default=0.005r
break=0.5r
axis_break_at_edge=yes
axis_break=yes
axis_break_style=2
<break_style 2>stroke_color=red
stroke_thickness=5p
thickness=2r
<break>
<spacing>
</pre>
<script>
sourceCodeById("cropping")
</script>
<p>
这里的axis_break和axis_break_at_edge参数是控制分割线的显示
<br>axis_break_at_edge当染色体不是从karyotype中它的开始到结束时，就会加上分割线
break控制裂缝的宽度
<br>而具体到每个线的设计，又在break_style标签里使用thickness控制长度
<br>stroke_thickness控制线的厚度，
</p>
</article>
<h1>修改染色体ideogram的位置</h1>
<img src="./image/variable_radius.svg" alt="" width="33%">
<img src="./image/variable_radius.svg" alt="" width="33%">
<img src="./image/variable_radius.svg" alt="" width="33%">
<pre id="variable_radius" style="display: none;">
chromosomes_radius=hs1:0.40r;hs2:0.43r;hs3:0.45r;hs4:0.48r
;hs5:0.50r;hs6:0.53r;hs7:0.56r;hs8:0.58r;hs9:0.61r;hs10:0.63r
;hs11:0.66r;hs12:0.69r;hs13:0.71r;hs14:0.74r;hs15:0.77r;hs16:0.79r
;hs17:0.82r;hs18:0.84r;hs19:0.87r;hs20:0.90r;hs21:0.92r;hs22:0.95r
;hsX:0.97r;hsY:1.00r
<ideogram>
radius=0.90r
</ideogram>
</pre>
<script>sourceCodeById("variable_radius")</script>
<p>
这里的计算方法主要是在ideogram中设置radius参数，为整个图片的0.9
<br>
紧接着在chromosomes_radius参数中可以分别设置每个染色体的半径，
<br>也就是hs1： radius*chromosomes_radius =0.9r*0.4r 也就是hs1的半径为正常图片半径的0.36！
</p>
<h1>理解tag标签的含义，当整条chromosomes被break成多个ideogram时，这些ideogram就可以通过tag来进行区分
<br>如果想要在被分开的ideogram上加上label只需要使用 label_with_tag=yes即可</h1>
<img src="./image/tag.svg" alt="" width="80%">
<pre id="show_label_tag" style="display: none;">
#定义好分割后的tag名字
chromosomes=hs1[a]:1-50;hs1[b]:70-100;hs2[c]:40-70;hs2[d]:80-120;hs3;hs4;
#在ideogram标签中使用标签进行显示
show_label_tag=yes
###同样可以使用正则表达式，对label的输出格式进行调整
label_format=eval(var(chr)=~/hs3$/ ? sprintf("chr%s",var(label)) : var(label))
</pre>
<script>sourceCodeById("show_label_tag")</script>
<p>
这里使用到C语言中的if判断语句A?B:C ;
</p>
<h1>最后就是关于ideogram的orientation的问题里，主要有两个参数</h1>
<div>
<img src="./image/clockwise.png" width="40%" alt="">
<img src="./image/counterclockwise.png" width="40%" alt="">
</div>
<ul>
<li>angle_offset设置图片的旋转角度，默认为-90从12钟方向开始</li>
<li>angle_orientation设置图片展示方式，逆时针或者顺时针，默认clockwise顺时针，counterclockwise</li>
<li>这两个参数都是在image标签中设置，并且需要强制设置*</li>
</ul>
<p style="font-size: 30;color: #8F2828;">
emmm
<strong>ideogram</strong>这部分就学习到这里啦！这些主要都是参考 <a href="http://circos.ca/documentation/tutorials/ideograms">官网手册</a>，加上自己动手实践总结的，有些地方还不是很完善，有错误的地方还请指正！
</p>
<!-- #########################################
-->
<footer id="footer">
</footer>
<script>
$("#footer").load("/includes/footer.html.php");
</script>
</div>
</body>
</html>