-
Notifications
You must be signed in to change notification settings - Fork 29
/
index.html
301 lines (257 loc) · 16.8 KB
/
index.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
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css"/>
<!-- Necessary includes for LocusZoom.js -->
<script src="https://cdn.jsdelivr.net/npm/d3@^5.16.0" type="text/javascript"></script>
<script src="dist/locuszoom.app.min.js" type="text/javascript"></script>
<script type="application/javascript" src="dist/ext/lz-dynamic-urls.min.js"></script>
<link rel="stylesheet" href="dist/locuszoom.css" type="text/css"/>
<title>LocusZoom.js</title>
<style>
body {
background-color: #FAFAFA;
margin: 0px 20px;
}
img {
max-width: 100%;
box-sizing: border-box;
}
div.example > a > h6 {
margin-bottom: 0.5em;
}
div.example > a > img {
border: 1px solid #8A8A8A;
margin-bottom: 1.4em;
}
</style>
</head>
<body>
<div class="container">
<h1 style="margin-top: 1em;"><strong>LocusZoom.js</strong></h1>
<h5 style="color: #777">A Javascript/d3 embeddable plugin for interactively visualizing and navigating statistical genetic data from customizable sources.</h5>
<hr>
<a name="try_it"></a>
<h3>Try LocusZoom.js</h3>
<p>Shown here is a standard interactive LocusZoom plot, depicting GWAS association data with gene tracks loaded from a University of Michigan API. Change the region of the genome in view by <b>scrolling to zoom</b> or <b>dragging to pan</b>, or use some of the links below to jump to top hits for this study by gene. Click around and experiment... LocusZoom.js can do a lot.</p>
<p>
<a href="https://github.com/statgen/locuszoom/blob/master/index.html">View source code</a>
</p>
<div class="row">
<div class="two columns">
<h4>Top Hits</h4>
<style>ul.top_hits li { margin-bottom: 0rem; }</style>
<ul class="top_hits" style="padding-left: 0.2rem; min-width: 110px;"></ul>
</div>
<div class="ten columns">
<div id="lz-plot"></div>
</div>
</div>
<p>To see other forms of LocusZoom.js in action take a look at <a href="https://my.locuszoom.org/">https://my.locuszoom.org</a> or the <a href="#examples">examples</a> on this page. If you are trying to make your own plots but don't want to create a full web server backend, the <a href="examples/ext/tabix_tracks.html">Tabix Tracks</a> demo provides some useful pointers.</p>
<hr>
<h3 id="get_it">Get LocusZoom.js</h3>
<p>
<a href="https://www.npmjs.com/package/locuszoom"><img src="https://img.shields.io/npm/v/locuszoom.svg?color=blue&label=LocusZoom" alt="LocusZoom.js newest release"></a>
</p>
<p>To use LocusZoom.js in your application you will need LocusZoom's compiled Javascript and CSS files,
<i>and</i> D3.js v5.16.0. We recommend the
CDN links below. If you prefer, you may also install the package via NPM and use with any module system that
supports ES6 modules or UMD bundles. Source maps are provided for all files.
</p>
<div class="row">
<div class="three columns">
<h6><strong>CSS</strong></h6>
</div>
<div class="nine columns">
<tt><a href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locuszoom.css">https://cdn.jsdelivr.net/npm/[email protected]/dist/locuszoom.css</a></tt>
<br>
<small><i>All CSS classes are namespaced to avoid collisions. Use <code><link crossorigin="anonymous" ...></code> to ensure that saving images works correctly.</i></small>
</div>
</div>
<div class="row">
<div class="three columns">
<h6><strong>Dependencies</strong></h6>
</div>
<div class="nine columns">
<tt><a href="https://cdn.jsdelivr.net/npm/d3@^5.16.0">https://cdn.jsdelivr.net/npm/d3@^5.16.0</a></tt>
</div>
</div>
<div class="row">
<div class="three columns">
<h6><strong>Javascript</strong></h6>
</div>
<div class="nine columns">
<tt><a href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locuszoom.app.min.js">https://cdn.jsdelivr.net/npm/[email protected]/dist/locuszoom.app.min.js</a></tt>
<br>
</div>
</div>
<br>
<p>To download or link to past builds of LocusZoom.js use the URL structure above and the version number of your choice. See also: <a href="https://github.com/statgen/locuszoom/releases">list of past releases </a>.</p>
<a class="button lz-toolbar-button-green" href="https://github.com/statgen/locuszoom" id="view-on-github">View source on GitHub</a>
<hr>
<a name="docs_and_support"></a>
<h3>Documentation and Support</h3>
<a class="button lz-toolbar-button-blue" href="https://statgen.github.io/locuszoom/docs/">Complete LocusZoom.js Documentation</a>
<br>
<a class="button lz-toolbar-button-purple" href="https://groups.google.com/forum/#!forum/locuszoom">LocusZoom Message Board</a>
<hr>
<a name="examples"></a>
<h3>Example Plots</h3>
<p>LocusZoom.js is customizable, extensible, and highly flexible. It can work with a wide variety of different types of data. Below are some examples to show some of LocusZoom.js's variability.</p>
<div class="row">
<div class="four columns example">
<a href="examples/ext/interval_annotations.html">
<h6><strong>Interval Annotations</strong></h6>
<img src="examples/ext/interval_annotations.png" alt="Interval Annotations">
</a>
</div>
<div class="four columns example">
<a href="examples/ext/phewas_forest.html">
<h6><strong>PheWAS (Forest)</strong></h6>
<img src="examples/ext/phewas_forest.png" alt="PheWAS (Forest)">
</a>
</div>
<div class="four columns example">
<a href="examples/phewas_scatter.html">
<h6><strong>PheWAS (Scatter)</strong></h6>
<img src="examples/phewas_scatter.png" alt="PheWAS (Scatter)">
</a>
</div>
</div>
<div class="row">
<div class="four columns example">
<a href="examples/ext/aggregation_tests.html">
<h6><strong>Aggregation Tests</strong></h6>
<img src="examples/ext/aggregation_tests.png" alt="Aggregation tests">
</a>
</div>
<div class="four columns example">
<a href="examples/ext/credible_sets.html">
<h6><strong>Credible Sets</strong></h6>
<img src="examples/ext/credible_sets.png" alt="Credible Sets">
</a>
</div>
<div class="four columns example">
<a href="examples/gwas_catalog.html">
<h6><strong>GWAS Catalog</strong></h6>
<img src="examples/gwas_catalog.png" alt="GWAS Catalog">
</a>
</div>
</div>
<div class="row">
<div class="four columns example">
<a href="examples/coaccessibility.html">
<h6><strong>Chromatin coaccessibility</strong></h6>
<img src="examples/coaccessibility.png" alt="Chromatin co-accessibility">
</a>
</div>
<div class="four columns example">
<a href="examples/multiple_phenotypes_layered.html">
<h6><strong>Multiple Phenotypes (Layered)</strong></h6>
<img src="examples/multiple_phenotypes_layered.png" alt="Multiple Phenotypes (Layered)">
</a>
</div>
<div class="four columns example" style="">
<a href="examples/ext/tabix_tracks.html">
<h6><strong>Tabix tracks</strong></h6>
<img src="examples/ext/tabix_tracks.png" alt="Plot your own data from tabix">
</a>
</div>
</div>
<hr>
<div class="row">
<footer style="text-align: center;">
© Copyright <script>document.write(new Date().getFullYear())</script> <a href="https://github.com/statgen">The University of Michigan Center for Statistical Genetics</a><br>
</footer>
</div>
</div>
<script type="text/javascript">
// Determine if we're online, based on browser state or presence of an optional query parameter
var online = !(typeof navigator != "undefined" && !navigator.onLine);
if (window.location.search.indexOf("offline") != -1){ online = false; }
// Define LocusZoom Data Sources object differently depending on online status
var apiBase, data_sources;
if (online) {
apiBase = "https://portaldev.sph.umich.edu/api/v1/";
data_sources = new LocusZoom.DataSources()
.add("assoc", ["AssociationLZ", { url: apiBase + "statistic/single/", source: 45 }])
.add("ld", ["LDServer", { url: "https://portaldev.sph.umich.edu/ld/", source: '1000G', build: 'GRCh37', population: 'ALL' }])
.add("gene", ["GeneLZ", { url: apiBase + "annotation/genes/", build: 'GRCh37' }])
.add("recomb", ["RecombLZ", { url: apiBase + "annotation/recomb/results/", build: 'GRCh37' }])
.add("constraint", ["GeneConstraintLZ", { url: "https://gnomad.broadinstitute.org/api/", build: 'GRCh37' }]);
} else {
apiBase = window.location.origin + window.location.pathname.substr(0, window.location.pathname.lastIndexOf("/") + 1) + "examples/data/";
data_sources = new LocusZoom.DataSources()
.add("assoc", ["AssociationLZ", { url: apiBase + "assoc_10_114550452-115067678.json?", source: 45 }])
.add("ld", ["LDServer", { url: apiBase + "ld_10_114550452-115067678.json?", build: 'GRCh37' }])
.add("gene", ["GeneLZ", { url: apiBase + "genes_10_114550452-115067678.json?", params: { build: 'GRCh37' } }])
.add("recomb", ["RecombLZ", { url: apiBase + "recomb_10_114550452-115067678.json?", params: { build: 'GRCh37' } }])
.add("constraint", ["GeneConstraintLZ", { url: apiBase + "constraint_10_114550452-115067678.json?", params: { build: 'GRCh37' } }]);
}
// Get the standard association plot layout from LocusZoom's built-in layouts
var stateUrlMapping = {chr: "chrom", start: "start", end: "end", ldrefvar: 'ld_variant' };
// Fetch initial position from the URL, or use some defaults
var initialState = LzDynamicUrls.paramsFromUrl(stateUrlMapping);
if (!Object.keys(initialState).length) {
initialState = {chr: '10', start: 114550452, end: 115067678};
}
layout = LocusZoom.Layouts.get("plot", "standard_association", {state: initialState});
// Add a button to show the study abstract in the layout.
// Since we're making a tiny change to an existing layout, we can use a helper designed to change just one nested property.
// If you are doing something very custom, consider creating an entire new layout by defining all your custom data_layers --> panels --> plots, building up from small pieces).
// Remember: layouts are plain JS objects with key-value pairs.
var abstract = "<h4 style=\"margin-top: 0px;\"><a href=\"https://www.ncbi.nlm.nih.gov/pubmed/?term=22885922\" target=\"_new\">Type 2 diabetes meta-analysis</a></h4>1. Nat Genet. 2012 Sep;44(9):981-90. doi: 10.1038/ng.2383. Epub 2012 Aug 12.<br><br>Large-scale association analysis provides insights into the genetic architecture <br>and pathophysiology of type 2 diabetes.<br><br>Morris AP, Voight BF, Teslovich TM, Ferreira T, Segrè AV, Steinthorsdottir V,<br>Strawbridge RJ, Khan H, Grallert H, Mahajan A, Prokopenko I, Kang HM, Dina C,<br>Esko T, Fraser RM, Kanoni S, Kumar A, Lagou V, Langenberg C, Luan J, Lindgren CM,<br>Müller-Nurasyid M, Pechlivanis S, Rayner NW, Scott LJ, Wiltshire S, Yengo L,<br>Kinnunen L, Rossin EJ, Raychaudhuri S, Johnson AD, Dimas AS, Loos RJ, Vedantam S,<br>Chen H, Florez JC, Fox C, Liu CT, Rybin D, Couper DJ, Kao WH, Li M, Cornelis MC, <br>Kraft P, Sun Q, van Dam RM, Stringham HM, Chines PS, Fischer K, Fontanillas P,<br>Holmen OL, Hunt SE, Jackson AU, Kong A, Lawrence R, Meyer J, Perry JR, Platou CG,<br>Potter S, Rehnberg E, Robertson N, Sivapalaratnam S, Stančáková A, Stirrups K,<br>Thorleifsson G, Tikkanen E, Wood AR, Almgren P, Atalay M, Benediktsson R,<br>Bonnycastle LL, Burtt N, Carey J, Charpentier G, Crenshaw AT, Doney AS, Dorkhan<br>M, Edkins S, Emilsson V, Eury E, Forsen T, Gertow K, Gigante B, Grant GB, Groves <br>CJ, Guiducci C, Herder C, Hreidarsson AB, Hui J, James A, Jonsson A, Rathmann W, <br>Klopp N, Kravic J, Krjutškov K, Langford C, Leander K, Lindholm E, Lobbens S,<br>Männistö S, Mirza G, Mühleisen TW, Musk B, Parkin M, Rallidis L, Saramies J,<br>Sennblad B, Shah S, Sigurðsson G, Silveira A, Steinbach G, Thorand B, Trakalo J, <br>Veglia F, Wennauer R, Winckler W, Zabaneh D, Campbell H, van Duijn C,<br>Uitterlinden AG, Hofman A, Sijbrands E, Abecasis GR, Owen KR, Zeggini E, Trip MD,<br>Forouhi NG, Syvänen AC, Eriksson JG, Peltonen L, Nöthen MM, Balkau B, Palmer CN, <br>Lyssenko V, Tuomi T, Isomaa B, Hunter DJ, Qi L; Wellcome Trust Case Control<br>Consortium; Meta-Analyses of Glucose and Insulin-related traits Consortium<br>(MAGIC) Investigators; Genetic Investigation of ANthropometric Traits (GIANT)<br>Consortium; Asian Genetic Epidemiology Network–Type 2 Diabetes (AGEN-T2D)<br>Consortium; South Asian Type 2 Diabetes (SAT2D) Consortium, Shuldiner AR, Roden<br>M, Barroso I, Wilsgaard T, Beilby J, Hovingh K, Price JF, Wilson JF, Rauramaa R, <br>Lakka TA, Lind L, Dedoussis G, Njølstad I, Pedersen NL, Khaw KT, Wareham NJ,<br>Keinanen-Kiukaanniemi SM, Saaristo TE, Korpi-Hyövälti E, Saltevo J, Laakso M,<br>Kuusisto J, Metspalu A, Collins FS, Mohlke KL, Bergman RN, Tuomilehto J, Boehm<br>BO, Gieger C, Hveem K, Cauchi S, Froguel P, Baldassarre D, Tremoli E, Humphries<br>SE, Saleheen D, Danesh J, Ingelsson E, Ripatti S, Salomaa V, Erbel R, Jöckel KH, <br>Moebus S, Peters A, Illig T, de Faire U, Hamsten A, Morris AD, Donnelly PJ,<br>Frayling TM, Hattersley AT, Boerwinkle E, Melander O, Kathiresan S, Nilsson PM,<br>Deloukas P, Thorsteinsdottir U, Groop LC, Stefansson K, Hu F, Pankow JS, Dupuis<br>J, Meigs JB, Altshuler D, Boehnke M, McCarthy MI; DIAbetes Genetics Replication<br>And Meta-analysis (DIAGRAM) Consortium.<br><br>To extend understanding of the genetic architecture and molecular basis of type 2<br>diabetes (T2D), we conducted a meta-analysis of genetic variants on the<br>Metabochip, including 34,840 cases and 114,981 controls, overwhelmingly of<br>European descent. We identified ten previously unreported T2D susceptibility<br>loci, including two showing sex-differentiated association. Genome-wide analyses <br>of these data are consistent with a long tail of additional common variant loci<br>explaining much of the variation in susceptibility to T2D. Exploration of the<br>enlarged set of susceptibility loci implicates several processes, including<br>CREBBP-related transcription, adipocytokine signaling and cell cycle regulation, <br>in diabetes pathogenesis.<br><br>DOI: 10.1038/ng.2383 <br>PMCID: PMC3442244<br>PMID: 22885922 [PubMed - indexed for MEDLINE]</div>";
LocusZoom.Layouts.mutate_attrs(
layout,
'$.panels[?(@.tag === "association")].toolbar.widgets',
(original) => original.concat([{
type: "menu",
color: "yellow",
position: "right",
button_html: "Study Abstract",
menu_html: abstract
}]));
// Generate the LocusZoom plot, and reflect the initial plot state in url
window.plot = LocusZoom.populate("#lz-plot", data_sources, layout);
// Changes in the plot can be reflected in the URL, and vice versa (eg browser back button can go back to
// a previously viewed region)
LzDynamicUrls.plotUpdatesUrl(plot, stateUrlMapping);
LzDynamicUrls.plotWatchesUrl(plot, stateUrlMapping);
// Create a method to parse a region string into a 600Kb genome range and load it
function jumpTo(region) {
var target = region.split(":");
var chr = target[0];
var pos = target[1];
var start = 0;
var end = 0;
if (!pos.match(/[-+]/)) {
start = +pos - 300000;
end = +pos + 300000
}
plot.applyState({ chr: chr, start: start, end: end, ldrefvar: "" });
return false;
}
// Populate a list of top hits links for the plot
var top_hits = [
["16:53819169", "FTO"],
["9:22051670", "CDKN2A/B"],
["7:28196413", "JAZF1"],
["12:71433293", "TSPAN8"],
["10:114758349", "TCF7L2"],
["8:95937502", "TP53INP1"],
["6:20679709", "CDKAL1"],
["2:161346447", "RBMS1"],
["16:75247245", "BCAR1"],
["15:77832762", "HMG20A"],
["7:15052860", "DGKB"]
];
top_hits.forEach(function(hit){
d3.select("ul.top_hits").append("li")
.html("<a href=\"javascript:void(0);\" onclick=\"javascript:jumpTo('" + hit[0] + "');\">" + hit[1] + "</a>");
});
</script>
</body>
</html>