![{
"alignment": "overlay",
"data": {
"url": "https://gosling-lang.org/data/example1.bw",
"type": "bigwig", ...
},
"tracks": [
{ "mark": "line", ... },
{ "mark": "point", ... },
],
“width": 400,
"height": 130
}
1
2
3
4
5
6
7
8
9
10
11
12
13
EXPRESSIVENESS: OVERLAYING](https://image.slidesharecdn.com/goslingvis-2021-250605010235-866ba027/85/Grammar-Based-Interactive-Visualization-of-Genomics-Data-39-320.jpg)
![1
2
3
4
5
6
7
8
9
EXPRESSIVENESS: OVERLAYING
{
"alignment": “overlay”,
"tracks": [
{ /* Gene Interval */ },
{ /* Exon Interval */ },
{ /* Gene Name */ }
]
}](https://image.slidesharecdn.com/goslingvis-2021-250605010235-866ba027/85/Grammar-Based-Interactive-Visualization-of-Genomics-Data-40-320.jpg)
![EXPRESSIVENESS: OVERLAYING
{
"alignment": “overlay”,
"tracks": [
{ /* Gene Interval */ },
{ /* Exon Interval */ },
{ /* Gene Name */ }
]
}
1
2
3
4
5
6
7
8
9](https://image.slidesharecdn.com/goslingvis-2021-250605010235-866ba027/85/Grammar-Based-Interactive-Visualization-of-Genomics-Data-41-320.jpg)
![EXPRESSIVENESS: OVERLAYING
{
"alignment": “overlay”,
"tracks": [
{ /* Bands */ },
{ /* Centromere */ },
{ /* Labels */ }
]
}
1
2
3
4
5
6
7
8
9](https://image.slidesharecdn.com/goslingvis-2021-250605010235-866ba027/85/Grammar-Based-Interactive-Visualization-of-Genomics-Data-42-320.jpg)
![EXPRESSIVENESS: STACKING
{
"alignment": “overlay”,
"tracks": [
{ /* Bands */ },
{ /* Centromere */ },
{ /* Labels */ }
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14](https://image.slidesharecdn.com/goslingvis-2021-250605010235-866ba027/85/Grammar-Based-Interactive-Visualization-of-Genomics-Data-43-320.jpg)
![EXPRESSIVENESS: STACKING
{
"alignment": "stack",
"tracks": [
{ /* Stacked Bar Chart */ },
]
}
{
"alignment": “overlay”,
"tracks": [
{ /* Bands */ },
{ /* Centromere */ },
{ /* Labels */ }
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14](https://image.slidesharecdn.com/goslingvis-2021-250605010235-866ba027/85/Grammar-Based-Interactive-Visualization-of-Genomics-Data-44-320.jpg)
![EXPRESSIVENESS: MULTI-VIEW ARRANGEMENT
1
2
3
4
5
6
7
8
{
"arrangement": "parallel",
"views": [
{ /* Chromosome 1 */ },
{ /* Chromosome 2 */ },
{ /* Chromosome 3 */ }
]
}](https://image.slidesharecdn.com/goslingvis-2021-250605010235-866ba027/85/Grammar-Based-Interactive-Visualization-of-Genomics-Data-45-320.jpg)
![EXPRESSIVENESS: CIRCULAR LAYOUT
{
"layout": “circular",
"arrangement": "parallel",
"views": [
{ /* Chromosome 1 */ },
{ /* Chromosome 2 */ },
{ /* Chromosome 3 */ }
]
}
1
2
3
4
5
6
7
8
9](https://image.slidesharecdn.com/goslingvis-2021-250605010235-866ba027/85/Grammar-Based-Interactive-Visualization-of-Genomics-Data-46-320.jpg)
Grammar-Based Interactive Visualization of Genomics Data
- 1. Grammar-Based Interactive Visualization of Genomics Data Biomedical Informatics, Harvard Medical School School of Engineering and Applied Sciences, Harvard University Sehi L’Yi Qianwen Wang Fritz Lekschas Nils Gehlenborg
- 2. GENOME-MAPPED DATA Genomic Axis > 3,000,000,000 Base Pairs
- 4. GENOME-MAPPED DATA Gene ~15,000 Base Pairs
- 7. GENOME-MAPPED DATA Whole Genome > 3Bbp Chromosome ~3Mbp Gene ~15Kbp Nucleotides 1bp
- 8. GENOME-MAPPED DATA Whole Genome > 3Bbp Chromosome ~3Mbp Gene ~15Kbp Nucleotides 1bp
- 9. GENOME-MAPPED DATA Whole Genome > 3Bbp Chromosome ~3Mbp Gene ~15Kbp Nucleotides 1bp
- 10. GENOME-MAPPED DATA Whole Genome > 3Bbp Chromosome ~3Mbp Gene ~15Kbp Nucleotides 1bp
- 11. GENOME-MAPPED DATA Whole Genome > 3Bbp Chromosome ~3Mbp Gene ~15Kbp Nucleotides 1bp
- 12. Whole Genome > 3Bbp Chromosome ~3Mbp Gene ~15Kbp Nucleotides 1bp CHALLENGES FOR VISUALIZING GENOME-MAPPED DATA
- 13. Whole Genome > 3Bbp Chromosome ~3Mbp Gene ~15Kbp Nucleotides 1bp Multi-Scale Multi-Focus Multi-Modality BigWig BED BAM … Large Data Size ~ Hundreds of GB Large Design Space ~ Hundreds of Visualizations Nusrat et al. 2019 CHALLENGES FOR VISUALIZING GENOME-MAPPED DATA
- 14. GENOMICS DATA VISUALIZATION TOOLS ... 83 Tools From Survey (Nusrat et al. 2019) Circos GenomeSpy ggBio MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo
- 15. Vega Vega-Lite Pixi.js ggPlot2 Tableau Lyra Spotfire MS Power BI MS Excel Google Charts D3.js General-Purpose Genomic-Specific Circos ggBio GenomeSpy MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo GENOMICS DATA VISUALIZATION TOOLS Circos GenomeSpy ggBio MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo Less Expressive More Expressive
- 16. Circos ggBio GenomeSpy MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo GENOMICS DATA VISUALIZATION TOOLS Less Expressive More Expressive Tailored For Specific Problems
- 17. Circos ggBio GenomeSpy MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo GENOMICS DATA VISUALIZATION TOOLS Less Expressive More Expressive Genome Browser
- 18. Circos GenomeSpy MizBee CNVkit Gremlin GIVE WebLogo Less Expressive More Expressive ggBio HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GENOMICS DATA VISUALIZATION TOOLS Genome Browser Heatmap … Bar Chart Line Chart Scatterplot Gene Annotation Chart Templates
- 19. DEVELOPING NEW VISUALIZATION IN HIGLASS Circos ggBio GenomeSpy MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo Less Expressive More Expressive
- 20. DEVELOPING NEW VISUALIZATION IN HIGLASS “Web-based Visualization Tools for Genome Interaction Matrices” Kerpedjiev et al. 2017 HiGlass
- 21. DEVELOPING NEW VISUALIZATION IN HIGLASS ClinVar Track Sequence Track Transcript Track HiGlass Plugin Tracks . . . Kerpedjiev et al. 2017 HiGlass
- 22. ClinVar Track Transcript Track HiGlass Plugin Tracks . . . Sequence Track SequenceTrack.js DEVELOPING NEW VISUALIZATION IN HIGLASS
- 23. ClinVar Track Transcript Track HiGlass Plugin Tracks . . . Sequence Track ~1,000 Lines of Code Pixi.js, JavaScript SequenceTrack.js DEVELOPING NEW VISUALIZATION IN HIGLASS
- 24. Vega Vega-Lite Pixi.js ggPlot2 Tableau Lyra Spotfire MS Power BI MS Excel Google Charts D3.js General-Purpose Genomic-Specific Circos ggBio GenomeSpy MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo Circos GenomeSpy ggBio MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo Less Expressive More Expressive DATA VISUALIZATION TOOLS
- 25. Vega Vega-Lite Pixi.js ggPlot2 Tableau Lyra Spotfire MS Power BI MS Excel Google Charts D3.js General-Purpose Genomic-Specific Circos ggBio GenomeSpy MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo Circos GenomeSpy ggBio MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo Less Expressive More Expressive Vega Vega-Lite Pixi.js ggPlot2 Tableau Lyra Spotfire MS Power BI MS Excel Google Charts D3.js General-Purpose Genomic-Specific DATA VISUALIZATION TOOLS
- 26. Less Expressive More Expressive Vega Vega-Lite Pixi.js ggPlot2 Tableau Lyra Spotfire MS Power BI MS Excel Google Charts D3.js General-Purpose Genomic-Specific Circos ggBio GenomeSpy MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo Low-Level Libraries DATA VISUALIZATION TOOLS
- 27. Less Expressive More Expressive Vega Vega-Lite Pixi.js ggPlot2 Tableau Lyra Spotfire MS Power BI MS Excel Google Charts D3.js General-Purpose Genomic-Specific Circos ggBio GenomeSpy MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo High-Level Grammars, Libraries, and Tools DATA VISUALIZATION TOOLS
- 28. Vega Vega-Lite Pixi.js ggPlot2 Tableau Lyra Spotfire MS Power BI MS Excel Google Charts D3.js GenomeSpy MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo Circos ggBio General-Purpose Genomic-Specific Less Expressive More Expressive • Static visualizations only DATA VISUALIZATION TOOLS
- 29. Circos ggBio Pixi.js Tableau Spotfire MS Power BI MS Excel Google Charts D3.js MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo General-Purpose Genomic-Specific Less Expressive More Expressive Vega Vega-Lite ggPlot2 Lyra GenomeSpy • Based on general data formats (e.g., CSV) • Limited scalability for large genomics datasets Circos Krzywinski et al. • Limited support of radial visualizations DATA VISUALIZATION TOOLS
- 30. Less Expressive More Expressive Vega Vega-Lite Pixi.js ggPlot2 Tableau Lyra Spotfire MS Power BI MS Excel Google Charts D3.js General-Purpose Genomic-Specific Circos ggBio GenomeSpy MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo DATA VISUALIZATION TOOLS
- 31. Gosling.js Less Expressive More Expressive Vega Vega-Lite Pixi.js ggPlot2 Tableau Lyra Spotfire MS Power BI MS Excel Google Charts D3.js General-Purpose Genomic-Specific Circos ggBio GenomeSpy MizBee CNVkit Gremlin HiGlass IGV EpiViz UCSC GB JBrowse WashU GB GIVE WebLogo DATA VISUALIZATION TOOLS
- 32. Gosling.js
- 33. Multi-Scale Multi-Focus Multi-Modality Large Data Size Large Design Space GOSLING’S APPROACHES Grammar of Graphics Wilkinson et al. 2012 Taxonomy of Genomics Visualizations Nusrat et al. 2019 Coordinated Interactions Zoom & Pan, Brushing, Linking Semantic Zoom Perlin and Fox 1993 HiGlass Infrastructure Kerpedjiev et al. 2017
- 34. Gosling Grammar
- 35. EXPRESSIVENESS: ENCODING { "data": { "url": “https://gosling-lang.org/data/example1.bw”, "type": “bigwig", ... }, "mark": "rect", "x": {"field": "position", "type": “genomic" }, "color": {"field": "peak", "type": “quantitative" }, "width": 400, "height": 130 } 1 2 3 4 5 6 7 8 9 10 11
- 36. { "data": { "url": “https://gosling-lang.org/data/example1.bw”, "type": “bigwig", ... }, "mark": “line", "x": {"field": "position", "type": “genomic" }, "y": {"field": "peak", "type": “quantitative" }, "width": 400, "height": 130 } 1 2 3 4 5 6 7 8 9 10 11 EXPRESSIVENESS: ENCODING
- 37. { "data": { "url": “https://gosling-lang.org/data/example1.bw”, "type": “bigwig", ... }, "mark": "point", "x": {"field": "position", "type": “genomic" }, "y": {"field": "peak", "type": “quantitative" }, "width": 400, "height": 130 } 1 2 3 4 5 6 7 8 9 10 11 EXPRESSIVENESS: ENCODING
- 38. { "data": { "url": “https://gosling-lang.org/data/example1.bw”, "type": “bigwig", ... }, "mark": "point", "x": {"field": "position", "type": “genomic" }, "y": {"field": "peak", "type": “quantitative" }, "size": {"field": "peak", "type": “quantitative" }, "color": {"field": "peak", "type": “quantitative" }, "width": 400, "height": 130 } 1 2 3 4 5 6 7 8 9 10 11 12 13 EXPRESSIVENESS: ENCODING
- 39. { "alignment": "overlay", "data": { "url": "https://gosling-lang.org/data/example1.bw", "type": "bigwig", ... }, "tracks": [ { "mark": "line", ... }, { "mark": "point", ... }, ], “width": 400, "height": 130 } 1 2 3 4 5 6 7 8 9 10 11 12 13 EXPRESSIVENESS: OVERLAYING
- 40. 1 2 3 4 5 6 7 8 9 EXPRESSIVENESS: OVERLAYING { "alignment": “overlay”, "tracks": [ { /* Gene Interval */ }, { /* Exon Interval */ }, { /* Gene Name */ } ] }
- 41. EXPRESSIVENESS: OVERLAYING { "alignment": “overlay”, "tracks": [ { /* Gene Interval */ }, { /* Exon Interval */ }, { /* Gene Name */ } ] } 1 2 3 4 5 6 7 8 9
- 42. EXPRESSIVENESS: OVERLAYING { "alignment": “overlay”, "tracks": [ { /* Bands */ }, { /* Centromere */ }, { /* Labels */ } ] } 1 2 3 4 5 6 7 8 9
- 43. EXPRESSIVENESS: STACKING { "alignment": “overlay”, "tracks": [ { /* Bands */ }, { /* Centromere */ }, { /* Labels */ } ] } 1 2 3 4 5 6 7 8 9 10 11 12 13 14
- 44. EXPRESSIVENESS: STACKING { "alignment": "stack", "tracks": [ { /* Stacked Bar Chart */ }, ] } { "alignment": “overlay”, "tracks": [ { /* Bands */ }, { /* Centromere */ }, { /* Labels */ } ] } 1 2 3 4 5 6 7 8 9 10 11 12 13 14
- 45. EXPRESSIVENESS: MULTI-VIEW ARRANGEMENT 1 2 3 4 5 6 7 8 { "arrangement": "parallel", "views": [ { /* Chromosome 1 */ }, { /* Chromosome 2 */ }, { /* Chromosome 3 */ } ] }
- 46. EXPRESSIVENESS: CIRCULAR LAYOUT { "layout": “circular", "arrangement": "parallel", "views": [ { /* Chromosome 1 */ }, { /* Chromosome 2 */ }, { /* Chromosome 3 */ } ] } 1 2 3 4 5 6 7 8 9
- 48. COORDINATED INTERACTIVITY: BRUSHING & LINKING
- 49. COORDINATED INTERACTIVITY: BRUSHING & LINKING
- 50. COORDINATED INTERACTIVITY: BRUSHING & LINKING
- 51. COORDINATED INTERACTIVITY: BRUSHING & LINKING
- 61. Documentation & Tutorials DOCUMENTATION & TUTORIALS http://gosling-lang.org