-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
306 lines (260 loc) · 13.9 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
302
303
304
305
306
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GenomeSpy</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&text=GenomeSpy&display=swap" rel="stylesheet" />
<link rel="preload" href="lit-all.min.js" as="script" />
<link rel="preload" href="example-card.js" as="script" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/svg+xml" href="img/genomespy-favicon.svg" />
<meta name="description"
content="A visualization grammar and a GPU-accelerated rendering engine for genomic (and other) data" />
<meta property="og:title" content="GenomeSpy" />
<meta property="og:description"
content="A visualization grammar and a GPU-accelerated rendering engine for genomic (and other) data" />
<meta property="og:image" content="https://genomespy.app/img/genomespy-card.png" />
<meta property="og:url" content="https://genomespy.app/" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="GenomeSpy" />
<meta name="twitter:description"
content="A visualization grammar and a GPU-accelerated rendering engine for genomic (and other) data" />
<meta name="twitter:image" content="https://genomespy.app/img/genomespy-card.png" />
</head>
<body>
<script src="https://kit.fontawesome.com/2e65d8a80b.js" crossorigin="anonymous"></script>
<script type="module" src="example-card.js"></script>
<section id="title" class="dark">
<div class="flex-figure">
<picture>
<img src="img/genomespy-bowtie.svg" alt="logo figure" />
</picture>
<div>
<h1>GenomeSpy</h1>
<p>
A visualization grammar and a GPU-accelerated rendering engine for genomic (and other) data.
</p>
<p>
Use GenomeSpy to make your own visualizations!
</p>
</div>
</div>
</section>
<section id="intro">
<p>
GenomeSpy builds upon the concepts originally introduced in
<a href="https://www.springer.com/gp/book/9780387245447">The Grammar Of Graphics</a> and later
implemented in <a href="https://ggplot2.tidyverse.org/">ggplot2</a> and <a
href="https://vega.github.io/vega-lite/">Vega-Lite</a>.
The building blocks that GenomeSpy provides allow users to build tailored, interactive genomic
visualizations,
which can be embedded on web pages or within JavaScript applications.
The carefully crafted GPU-accelerated rendering engine guarantees smoothly animated interactions
and a pleasant user experience for end users. Scroll down for live <a href="#examples">examples</a>.
</p>
</section>
<section id="building-blocks">
<h2>The Building Blocks</h2>
<a href="docs/grammar/data/">
<figure class="flex-figure">
<picture><img src="img/block-data.svg" alt="data" /></picture>
<figcaption>
<strong>Your data:</strong>
Currently supported formats: CSV, TSV, JSON, FASTA, indexed FASTA, BigWig, BigBed, and GFF3.
</figcaption>
</figure>
</a>
<a href="docs/grammar/transform/">
<figure class="flex-figure">
<picture><img src="img/block-transform.svg" alt="transform" /></picture>
<figcaption><strong>Transformations:</strong> Filter and derive data, perform computations such as
<em>pileup</em> or
<em>coverage</em>.
</figcaption>
</figure>
</a>
<a href="docs/grammar/scale/">
<figure class="flex-figure">
<picture><img src="img/block-scale.svg" alt="scale" /></picture>
<figcaption><strong>Scales:</strong> Make the data dimensions suitable for visual representation.
</figcaption>
</figure>
</a>
<a href="docs/grammar/mark/">
<figure class="flex-figure">
<picture><img src="img/block-mark.svg" alt="mark" /></picture>
<figcaption>
<strong>Graphical marks:</strong> Use the <em>point</em> mark for a scatter plot or mutations,
adapt the <em>rect</em> mark for a bar chart or genomic segments.
</figcaption>
</figure>
</a>
<a href="docs/grammar/mark/#channels">
<figure class="flex-figure">
<picture><img src="img/block-channel.svg" alt="channel" /></picture>
<figcaption>
<strong>Visual channels:</strong> Map the scale-transformed data to the properties of the marks.
For example: position, size, color, and symbol.
</figcaption>
</figure>
</a>
<a href="docs/grammar/composition/">
<figure class="flex-figure">
<picture><img src="img/block-view-composition.svg" alt="view composition" /></picture>
<figcaption>
<strong>View composition:</strong> Combine multiple views, optionally sharing data and scales.
Concatenate, layer, and facet.
</figcaption>
</figure>
</a>
<a href="docs/grammar/">
<figure class="flex-figure">
<picture><img src="img/block-spec.svg" alt="view spec" /></picture>
<figcaption>
<strong>View specification:</strong> Put everything together using the grammar.
GenomeSpy's visualization grammar is <strong>heavily</strong> inspired by
Vega-Lite, extending it with functionalities often needed with genomic data.
</figcaption>
</figure>
</a>
</section>
<section id="resources">
<h2>Resources</h2>
<ul class="icon-list">
<li>
<i class="fas fa-book fa-fw"></i>
<a href="docs/">Documentation</a>
</li>
<li>
<i class="fas fa-futbol fa-fw"></i>
<a href="playground/">Playground</a>
</li>
<li>
<i class="fas fa-external-link-alt fa-fw"></i>
<a href="https://observablehq.com/collection/@tuner/genomespy">Observable notebooks</a>
</li>
<li>
<i class="fab fa-github fa-fw"></i>
<a href="https://github.com/genome-spy/genome-spy">GitHub</a>
</li>
<li>
<i class="fas fa-comments fa-fw"></i>
<a href="https://github.com/genome-spy/genome-spy/discussions">Questions and feedback</a>
</li>
<li>
<i class="fab fa-youtube fa-fw"></i>
A sixty-second <a href="https://youtu.be/WgXUE0comEc">lightning talk</a> presented at VIZBI 2021
</li>
<li>
<i class="fas fa-award fa-fw"></i>
The <a href="https://twitter.com/biovis_net/status/1283526382081933312">award-winning</a>
BioVis @ ISMB 2020 <a href="https://doi.org/10.7490/f1000research.1118237.1">poster</a> and
<a href="https://www.youtube.com/watch?v=7GanrFw7gJA">talk</a>
</li>
<li>
<i class="fas fa-graduation-cap fa-fw"></i>
<a href="http://urn.fi/URN:NBN:fi:hulib-202006243441">MSc thesis</a>
</li>
</ul>
<h2>Publications</h2>
<!-- IEEE style -->
<ul class="publication-list">
<li>K. Lavikka <i>et al</i>., "Deciphering Cancer Genomes with GenomeSpy: A Grammar-Based Visualization
Toolkit," <i>bioRxiv</i>, Oct 2023, doi:
<a href="https://doi.org/10.1101/2023.10.06.561159">10.1101/2023.10.06.561159</a>
</li>
<li>A. Lahtinen <i>et al</i>., “Evolutionary states and trajectories characterized by distinct pathways
stratify
patients with ovarian high grade serous carcinoma,” <i>Cancer Cell</i>, May 2023, doi:
<a href="https://doi.org/10.1016/j.ccell.2023.04.017">10.1016/j.ccell.2023.04.017</a>.
</li>
<li>W. Senkowski <i>et al</i>., “A platform for efficient establishment and drug-response profiling of
high-grade
serous ovarian cancer organoids,” <i>Dev Cell</i>, May 2023, doi: <a
href="https://doi.org/10.1016/j.devcel.2023.04.012">10.1016/j.devcel.2023.04.012</a>.</li>
</ul>
</section>
<section id="examples" class="dark">
<!-- <h2>Examples</h2> -->
<div id="cards">
<genome-spy-example spec="simple/bar.json" img-src="bar.png">
Abstract example: Using rect and text marks to specify a labeled bar chart.
</genome-spy-example>
<genome-spy-example spec="simple/heatmap_with_text.json" img-src="heatmap_with_text.png">
Abstract example: Using rect and text marks to make a labeled heatmap.
The labels are automatically scaled to fit the cells. Try to zoom in and out!
</genome-spy-example>
<genome-spy-example spec="tSNE/tsne.json" img-src="tsne.jpg">
A scatter plot with one and a half million points decorated with some
annotations visualizes a miserably failed t-SNE attempt.
</genome-spy-example>
<genome-spy-example spec="OCAC/ocac.json" img-src="gwas.png">
A Manhattan plot for Genome-Wide Association Study (GWAS).
</genome-spy-example>
<genome-spy-example spec="MSA/msa.json" img-src="msa.png">
Multiple sequence alignment. Loads data from a fasta file and
displays it as a scrollable heatmap and a sequence logo.
</genome-spy-example>
<genome-spy-example spec="SV/sv.json" img-src="sv.png">
A structural variation visualization that uses the link mark to show
pretty arcs connecting the breakpoints. There's also some segmented copy-number data.
</genome-spy-example>
<genome-spy-example spec="simple/bigwig.json" img-src="gc-content.png">
GC content of the human genome: One dataset, two visual representations. The data
are loaded lazily from a BigWig file and the scale domains are autoscaled
to accommodate the region.
</genome-spy-example>
<genome-spy-example spec="GENCODE/gencode.json" img-src="gencode.png">
Using lazy data loading, data transformations, and multiple layers
to visualize the GENCODE gene annotation stored in a hierarchical
GFF3 file.
</genome-spy-example>
<genome-spy-example
link="https://observablehq.com/@tuner/ascat-copy-number-segmentation?collection=@tuner/genomespy"
img-src="ascat.png">
An Observable notebook describing how to replicate ASCAT's copy-number segmentation
visualization. The visualization is interactive and thoroughly commented.
</genome-spy-example>
<genome-spy-example app="PARPiCL/parpicl.json" img-src="parpicl.png">
Exploring a sample collection with the GenomeSpy App. The visualization shows
several cell-line samples with segmented copy numbers, loss of heterozygosity, and SNPs and INDELs.
</genome-spy-example>
<genome-spy-example link="https://csbi.ltdk.helsinki.fi/p/lahtinen_et_al_2023/" img-src="lahtinen_2023.png">
GenomeSpy in action: Lahtinen, A., Lavikka, K., <em>et al</em>. (2023) Evolutionary states
and trajectories characterized by distinct pathways stratify patients
with ovarian high grade serous carcinoma.
</genome-spy-example>
<genome-spy-example link="segmentmodel/" img-src="segmentmodel.png">
SegmentModel Spy. Visualize GATK's copy-number segment models together
with read and allelic counts. An example of using GenomeSpy as a visualization
library in a special-purpose web application.
</genome-spy-example>
</div>
</section>
<section id="about">
<div class="flex-figure">
<div>
<p>Copyright © 2019-2024 Kari Lavikka
<a href="https://twitter.com/KariLavikka"><i class="fab fa-twitter fa-fw"></i></a>
<a href="mailto:kari.lavikka@helsinki.fi"><i class="fas fa-envelope fa-fw"></i></a>
</p>
<p>GenomeSpy is developed in <a
href="https://www.helsinki.fi/en/researchgroups/systems-biology-of-drug-resistance-in-cancer">The
Systems Biology of Drug Resistance in
Cancer</a> group at the <a href="https://www.helsinki.fi/">University of Helsinki</a>.
<p>This project has received funding from the European Union's
Horizon 2020 Research and Innovation Programme under Grant
agreement No. 965193 (DECIDER) and No. 847912 (RESCUER).</p>
</div>
<picture>
<a href="https://www.deciderproject.eu/" id="decider-logo">
<img src="img/DECIDER.svg" width="150" alt="DECIDER" />
</a>
</picture>
</div>
</section>
</body>
</html>