-
Notifications
You must be signed in to change notification settings - Fork 4
/
embed.html
116 lines (98 loc) · 4.54 KB
/
embed.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
---
layout: page
title: Embedding Dalliance
---
<p>
Dalliance is a self-contained Javascript object which can be inserted into
almost any web page, e.g.:
</p>
<script language="javascript" src="{{site.uiprefix}}/dalliance-compiled.js"></script>
<script language="javascript">
new Browser({
chr: '22',
viewStart: 30700000,
viewEnd: 30900000,
coordSystem: {
speciesName: 'Human',
taxon: 9606,
auth: 'GRCh',
version: '37',
ucscName: 'hg19'
},
sources: [{name: 'Genome',
twoBitURI: '//www.biodalliance.org/datasets/hg19.2bit',
tier_type: 'sequence'},
{name: 'Genes',
desc: 'Gene structures from GENCODE 19',
bwgURI: '//www.biodalliance.org/datasets/gencode.bb',
stylesheet_uri: '//www.biodalliance.org/stylesheets/gencode.xml',
collapseSuperGroups: true,
trixURI: '//www.biodalliance.org/datasets/geneIndex.ix'},
{name: 'Repeats',
desc: 'Repeat annotation from Ensembl',
bwgURI: '//www.biodalliance.org/datasets/repeats.bb',
stylesheet_uri: '//www.biodalliance.org/stylesheets/bb-repeats.xml'},
{name: 'Conservation',
desc: 'Conservation',
bwgURI: '//www.biodalliance.org/datasets/phastCons46way.bw',
noDownsample: true}],
prefix: '{{site.uiprefix}}/',
cookieKey: 'human-embed-demo',
disablePoweredBy: true,
noTitle: true
});
</script>
<div id="svgHolder" style='margin-left: 5%; margin-right: 5%; border-width: 1px; border-style: solid; border-color: #ccc; border-radius: 4px; padding: 10px'></div>
<p>
Typical embedding code looks something like:
</p>
{% highlight html %}
<script language="javascript" src="{{site.uiprefix}}/dalliance-compiled.js"></script>
<script language="javascript">
new Browser({
chr: '22',
viewStart: 30700000,
viewEnd: 30900000,
coordSystem: {
speciesName: 'Human',
taxon: 9606,
auth: 'GRCh',
version: '37',
ucscName: 'hg19'
},
sources: [{name: 'Genome',
twoBitURI: '//www.biodalliance.org/datasets/hg19.2bit',
tier_type: 'sequence'},
{name: 'Genes',
desc: 'Gene structures from GENCODE 19',
bwgURI: '//www.biodalliance.org/datasets/gencode.bb',
stylesheet_uri: '//www.biodalliance.org/stylesheets/gencode.xml',
collapseSuperGroups: true,
trixURI: '//www.biodalliance.org/datasets/geneIndex.ix'},
{name: 'Repeats',
desc: 'Repeat annotation from Ensembl',
bwgURI: '//www.biodalliance.org/datasets/repeats.bb',
stylesheet_uri: '//www.biodalliance.org/stylesheets/bb-repeats.xml'},
{name: 'Conservation',
desc: 'Conservation',
bwgURI: '//www.biodalliance.org/datasets/phastCons46way.bw',
noDownsample: true}],
});
</script>
<div id="svgHolder"></div>
{% endhighlight %}
Note that you need to provide a DIV (named "svgHolder" by default, although this can be changed if you
want to embed multiple browsers in one page) into which the browser components will be inserted. You can
apply more-or-less arbitrary CSS to this <code>div</code> in order to style it or fit it into your page
layout.
<h3>Embedding API</h3>
It's possible to change or animate the view, add/remove tracks, or adjust the highlighted
region from Javascript code. There should be some more examples here! There is also
a <a href='plugins.html'>plugin API</a> for extending and customizing the browser.
<h3>Examples of embedding</h3>
Public sites known to use Biodalliance. Let us know if you want yours added!
<ul>
<li><a href='https://www.mousephenotype.org/'>Mouse phenotyping consortium</a></li>
<li><a href='http://opensnp.org/snps/rs762551'>OpenSNP</a></li>
<li><a href='http://genomernai.dkfz.de/GenomeRNAi/'>GenomeRNAi</li>
</ul>