Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
518 lines (460 loc) · 27.1 KB
/
Copy pathindex.html
File metadata and controls
518 lines (460 loc) · 27.1 KB
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
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GenomeSpy — Interactive Genomic Visualization for Web and Notebooks</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="modulepreload" href="lit-all.min.js" />
<link rel="modulepreload" href="showcase/showcase.js" />
<link rel="preload" href="showcase/spec/spec.json" as="fetch" crossorigin="anonymous" />
<link rel="preload" href="showcase/spec/overview.json" as="fetch" crossorigin="anonymous" />
<link rel="preload" href="showcase/spec/cytobands.json" as="fetch" crossorigin="anonymous" />
<link rel="preload" href="showcase/spec/sequence.json" as="fetch" crossorigin="anonymous" />
<link rel="preload" href="showcase/spec/gc5Base.json" as="fetch" crossorigin="anonymous" />
<link rel="preload" href="showcase/spec/conservation.json" as="fetch" crossorigin="anonymous" />
<link rel="preload" href="showcase/spec/genes.json" as="fetch" crossorigin="anonymous" />
<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="GenomeSpy is an interactive, GPU-accelerated visualization toolkit for genomic data. Build tailored visualizations and genome browsers using a declarative grammar." />
<meta property="og:title" content="GenomeSpy — Interactive Genomic Visualization for Web and Notebooks" />
<meta property="og:description"
content="A visualization grammar and 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 — Interactive Genomic Visualization for Web and Notebooks" />
<meta name="twitter:description"
content="A visualization grammar and GPU-accelerated rendering engine for genomic (and other) data" />
<meta name="twitter:image" content="https://genomespy.app/img/genomespy-card.png" />
<meta name="google-site-verification" content="cdBmxUxM5Dh1OeVuCsOz4B5Jht2i_N03RG6QDeLbXTk" />
</head>
<body>
<script src="https://kit.fontawesome.com/2e65d8a80b.js" crossorigin="anonymous"></script>
<script type="module" src="./showcase/showcase.js"></script>
<script type="module" src="./video/video-carousel.js"></script>
<nav id="nav-bar">
<ul>
<li>
<a href="docs/"><i class="fas fa-book fa-fw"></i> Docs</a>
</li>
<li>
<a href="genome-spy-python/"><i class="fas fa-book fa-fw"></i> Python<span class="nav-label-suffix">
Docs</span></a>
</li>
<li>
<a href="playground/#examples"><i class="fas fa-futbol fa-fw"></i> Playground</a>
</li>
<li>
<a href="blog/"><i class="fas fa-newspaper fa-fw"></i> Blog</a>
</li>
<li>
<a href="https://github.com/genome-spy"><i class="fab fa-github fa-fw"></i> GitHub</a>
</li>
</ul>
</nav>
<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 custom visualizations or genome browsers. Embed in
web applications or Python or JavaScript notebooks.
</p>
</div>
</div>
</section>
<section id="intro">
<p>
GenomeSpy provides building blocks for tailored, interactive genomic visualizations.
Integrate them into <a href="docs/api/embedding/">web applications</a> or explore your data in
<a href="genome-spy-python/">Python notebooks</a> such as Jupyter and marimo, or in
<a href="https://observablehq.com/collection/@tuner/genomespy">Observable</a>.
GPU-accelerated WebGL rendering supports smooth zooming and panning through large datasets.
</p>
<p>
A declarative grammar lets you describe your data, choose graphical marks, and combine views.
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>.
</p>
<p>
Originally developed to explore <a href="#app">large sample collections</a> in cancer genomics research,
GenomeSpy has since been used in several <a href="#publications">publications</a>.
Try the interactive genome browser below, or browse more <a href="#examples">examples</a>.
</p>
</section>
<section id="showcase">
<genome-spy-showcase></genome-spy-showcase>
</section>
<section id="building-blocks">
<h2>The Core 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>
Supports multiple formats: CSV, TSV, JSON, Parquet, BAM BED, BEDPE, 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 functionality often needed for genomic data.
</figcaption>
</figure>
</a>
<a href="genome-spy-python/">
<figure class="flex-figure">
<!-- Unaltered Python logo from https://www.python.org/community/logos/ -->
<picture><img src="img/block-python.svg" alt="Python logo" /></picture>
<figcaption>
<strong>Python API:</strong> Bring interactive genomic visualization into your analysis workflow.
Build and combine charts with an Altair-like API, then explore the results in Jupyter or marimo
notebooks without writing JSON by hand.
</figcaption>
</figure>
</a>
</section>
<section id="app" class="dark">
<h2>GenomeSpy App</h2>
<p><a href="docs/sample-collections/">GenomeSpy App</a> is a visual
analytics application for interactive exploration of multi-sample cancer
genomics data. It supports overview-to-detail analysis of large sample
collections, allowing users to identify cohort-wide patterns and then
inspect individual samples, genomic regions, and outliers in detail.</p>
<p>It builds on the GenomeSpy Core package, enabling extensive
customization for different data modalities, including copy-number
variation, structural variants, mutations, methylation, continuous
genomic signals such as coverage and accessibility, and sample
metadata.</p>
<p>The App provides incremental, provenance-aware actions for filtering,
grouping, and reorganizing samples, as well as for deriving new
attributes from genome-aligned point and segment features. Users can
bookmark and share action-defined views as URLs.</p>
<video-carousel role="region" aria-roledescription="carousel" aria-label="GenomeSpy App videos">
<div data-video-src="https://data.genomespy.app/website-resources/video/app-video.webm">
<p>Exploring copy-number alterations and short variants in the DECIDER ovarian cancer cohort,
from cohort-wide patterns to individual samples and genomic regions.
See the <a href="https://doi.org/10.1093/gigascience/giae040">GenomeSpy paper (Lavikka <em>et al.</em>, 2024)</a>
for details and the accompanying interactive visualization.</p>
</div>
<div data-video-src="https://data.genomespy.app/website-resources/video/MCCA.webm">
<p>An independent GenomeSpy demo exploring copy-number profiles, somatic variants,
and gene expression in the Mouse Cancer Cell Line Atlas (MCCA).
Data from <a href="https://doi.org/10.1038/s41586-026-10187-2">Mueller <em>et al.</em> (2026)</a>,
prepared using the
<a href="https://github.com/genome-spy/genomespy-dataset-recipes/tree/main/recipes/mcca-cell-line-atlas-mm10">MCCA dataset recipe</a>.</p>
</div>
<div data-video-src="https://data.genomespy.app/website-resources/video/FUSE.webm">
<p>Exploring DNA methylation patterns in 61 ENCODE samples alongside FUSE-defined
methylation segments and regulatory annotations.
See the <a href="#fuse-paper">FUSE paper (Holmström <em>et al.</em>, 2026)</a>
and try the <a href="https://csbi.ltdk.helsinki.fi/p/fuse_encode_gs/">interactive visualization</a>.</p>
</div>
</video-carousel>
</section>
<section id="resources">
<h2>Resources</h2>
<ul class="icon-list">
<li>
<i class="fas fa-book fa-fw"></i>
<a href="docs/">Documentation (JSON / JavaScript)</a>
</li>
<li>
<i class="fas fa-book fa-fw"></i>
<a href="genome-spy-python/">Documentation (Python)</a>
</li>
<li>
<i class="fas fa-futbol fa-fw"></i>
<a href="playground/#examples">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="fas fa-newspaper fa-fw"></i>
<a href="blog/">Blog</a>
</li>
<li>
<i class="fab fa-github fa-fw"></i>
<a href="https://github.com/genome-spy">GitHub</a>
</li>
<li>
<i class="fab fa-linkedin fa-fw"></i>
<a href="https://www.linkedin.com/company/genomespy/">LinkedIn</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>
</section>
<section>
<h2 id="publications">Publications featuring GenomeSpy</h2>
<!-- IEEE style -->
<ul class="publication-list">
<li id="genomespy-paper" class="genomespy-paper"><i class="fas fa-star publication-star" role="img"
aria-label="GenomeSpy paper" title="GenomeSpy paper"></i>K. Lavikka <i>et al</i>., "Deciphering Cancer Genomes with GenomeSpy: A Grammar-Based Visualization
Toolkit," <i>GigaScience</i>, Aug 2024, doi:
<a href="https://doi.org/10.1093/gigascience/giae040">10.1093/gigascience/giae040</a>.
</li>
<li id="fuse-paper">S. Holmström <i>et al</i>., "FUSE: data-driven functional segmentation of DNA methylation
data," <i>Bioinformatics</i>, Apr 2026, doi:
<a href="https://doi.org/10.1093/bioinformatics/btag201">10.1093/bioinformatics/btag201</a>.
</li>
<li>G. Micoli <i>et al</i>., "Decoding the Genomic and Functional Landscape of Emerging Subtypes in
Ovarian Cancer", <i>Cancer Discovery</i>, Jul 2025,
doi: <a href="https://doi.org/10.1158/2159-8290.CD-25-0652">10.1158/2159-8290.CD-25-0652</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> -->
<ul id="cards">
<li class="example-card">
<a href="https://genomespy.app/docs/grammar/composition/layer/#example" class="screenshot"><img
src="example_img/bar.png" alt="Interactive labeled bar chart with layered marks"
title="Interactive labeled bar chart with layered marks"></a>
<div class="description">
<div class="description-text">Abstract example: Using rect and text marks to specify a labeled bar
chart.</div>
</div>
</li>
<li class="example-card">
<a href="https://genomespy.app/playground/?spec=/docs/example-specs/core/layout/layer/heatmap_with_text.json"
class="screenshot"><img src="example_img/heatmap_with_text.png"
alt="Interactive heatmap with automatically scaled text labels"
title="Interactive heatmap with automatically scaled text labels"></a>
<div class="description">
<div class="description-text">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!</div>
</div>
</li>
<li class="example-card">
<a href="playground/?spec=../examples/tSNE/tsne.json" class="screenshot"><img src="example_img/tsne.jpg"
alt="Visualizing 1.5 million points in an interactive t-SNE scatter plot"
title="Visualizing 1.5 million points in an interactive t-SNE scatter plot"></a>
<div class="description">
<div class="description-text">A scatter plot with one and a half million points decorated with some
annotations visualizes a miserably failed t-SNE attempt.</div>
</div>
</li>
<li class="example-card">
<a href="playground/?spec=../examples/OCAC/ocac.json" class="screenshot"><img src="example_img/gwas.png"
alt="Interactive Manhattan plot for genome-wide association studies"
title="Interactive Manhattan plot for genome-wide association studies"></a>
<div class="description">
<div class="description-text">A Manhattan plot for Genome-Wide Association Study (GWAS).</div>
</div>
</li>
<li class="example-card">
<a href="https://genomespy.app/docs/examples/genomic-data/multiple-sequence-alignment/"
class="screenshot"><img src="example_img/msa.png"
alt="Interactive multiple sequence alignment and sequence logo from FASTA"
title="Interactive multiple sequence alignment and sequence logo from FASTA"></a>
<div class="description">
<div class="description-text">A multiple sequence alignment that loads data from a FASTA file and
displays it as a scrollable heatmap and sequence logo.</div>
</div>
</li>
<li class="example-card">
<a href="https://genomespy.app/docs/examples/genomic-data/hcc1954-sv-cnv/" class="screenshot"><img
src="example_img/sv.webp"
alt="Visualizing structural variants and copy-number changes in cancer genomes"
title="Visualizing structural variants and copy-number changes in cancer genomes"></a>
<div class="description">
<div class="description-text">A structural variation visualization that uses the link mark to show
arcs connecting the breakpoints. It also includes segmented copy-number data.</div>
</div>
</li>
<li class="example-card">
<a href="playground/?spec=../examples/simple/bigwig.json" class="screenshot"><img
src="example_img/gc-content.png"
alt="Interactive human genome GC-content track from BigWig data"
title="Interactive human genome GC-content track from BigWig data"></a>
<div class="description">
<div class="description-text">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.</div>
</div>
</li>
<li class="example-card">
<a href="playground/?spec=../examples/GENCODE/gencode.json" class="screenshot"><img
src="example_img/gencode.png"
alt="Visualizing GENCODE gene annotations from hierarchical GFF3 data"
title="Visualizing GENCODE gene annotations from hierarchical GFF3 data"></a>
<div class="description">
<div class="description-text">Using lazy data loading, data transformations, and multiple layers
to visualize the GENCODE gene annotation stored in a hierarchical
GFF3 file.</div>
</div>
</li>
<li class="example-card">
<a href="https://observablehq.com/@tuner/ascat-copy-number-segmentation?collection=@tuner/genomespy"
class="screenshot"><img src="example_img/ascat.png"
alt="Exploring ASCAT copy-number segmentation results"
title="Exploring ASCAT copy-number segmentation results"></a>
<div class="description">
<div class="description-text">An Observable notebook that describes how to replicate ASCAT's
copy-number segmentation
visualization. The visualization is interactive and thoroughly commented.</div>
</div>
</li>
<li class="example-card">
<a href="examples/?spec=PARPiCL/parpicl.json" class="screenshot"><img src="example_img/parpicl.png"
alt="Exploring cell-line copy number, loss of heterozygosity, and sequence variants"
title="Exploring cell-line copy number, loss of heterozygosity, and sequence variants"></a>
<div class="description">
<div class="description-text">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.</div>
</div>
</li>
<li id="decider-example" class="example-card">
<a href="https://csbi.ltdk.helsinki.fi/pub/projects/genomespy-paper-2024/" class="screenshot"><img
src="example_img/lavikka_2024.webp"
alt="Visualizing ovarian high-grade serous carcinoma copy number data with GenomeSpy. Red-gray-blue bars form a heatmap of copy number segments. G score summarizes data across samples."
title="Visualizing ovarian high-grade serous carcinoma copy number data"></a>
<div class="description">
<div class="description-text"> GenomeSpy App visualizes ovarian high-grade serous carcinoma copy
number data in the DECIDER cohort.
A companion visualization for Lavikka, K., Oikkonen, J., <em>et al</em>.
(2024) Deciphering Cancer Genomes with GenomeSpy: A Grammar-Based Visualization Toolkit.
<em>GigaScience</em>, 13(8), giad040.
</div>
</div>
</li>
<li class="example-card">
<a href="https://genomespy.app/segment-model-spy/" class="screenshot"><img src="example_img/segmentmodel.png"
alt="Inspecting GATK copy-number segments, read counts, and allelic counts"
title="Inspecting GATK copy-number segments, read counts, and allelic counts"></a>
<div class="description">
<div class="description-text">SegmentModel Spy. Visualizes GATK's copy-number segment models
together
with read and allelic counts. This is an example of using GenomeSpy as a visualization
library in a special-purpose web application.</div>
</div>
</li>
</ul>
</section>
<section id="about">
<div class="flex-figure">
<div>
<p>Copyright © 2018-2026 Kari Lavikka
(<a href="https://www.linkedin.com/in/karilavikka/" title="Linkedin"><i
class="fab fa-linkedin fa-fw"></i></a>
<a href="https://bsky.app/profile/karilavikka.fi" title="Bluesky"><i
class="fab fa-bluesky fa-fw"></i></a>
<a href="mailto:kari@karilavikka.fi" title="e-mail"><i class="fas fa-envelope fa-fw"></i></a>),
Oskari Lehtonen
(<a href="https://www.linkedin.com/in/oskari-lehtonen/" title="LinkedIn"><i
class="fab fa-linkedin fa-fw"></i></a>
<a href="mailto:oskarilehtonen4@gmail.com" title="e-mail"><i class="fas fa-envelope fa-fw"></i></a>),
and contributors.
</p>
<p>GenomeSpy was originally developed as Kari Lavikka's MSc thesis project in the <a
href="https://www.helsinki.fi/en/researchgroups/systems-biology-of-drug-resistance-in-cancer">Systems
Biology of Drug Resistance in
Cancer</a> group at the <a href="https://www.helsinki.fi/">University of Helsinki</a>.
Development continued during his doctoral research.</p>
<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),
the Sigrid Jusélius Foundation, the Cancer Foundation Finland,
and Orion Research Foundation.</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>