![In many hospitals, screens are very old, and this often relates
to the amount of information that we can show. ... [The name
of a front-end engineer] always thinks of how this interface
looks like on small screens.
— Project Manager of Interactive Data Portal1
1 CGAP (Clinical Genome Analysis Platform): https://cgap.hms.harvard.edu/
“](https://image.slidesharecdn.com/presentation-final-250605005538-8baf61b2/85/Multi-View-Design-Patterns-Responsive-Visualization-for-Genomics-Data-4-320.jpg)
![In many hospitals, screens are very old, and this often relates
to the amount of information that we can show. ... [The name
of a front-end engineer] always thinks of how this interface
looks like on small screens.
— Project Manager of Interactive Data Portal1
1 CGAP (Clinical Genome Analysis Platform): https://cgap.hms.harvard.edu/
“
How To Support Smaller Screens In Genomics Data Visualizations?
Responsive Multi-View
How To Support Smaller Screens In Genomics Data Visualizations?
Vertically Long
A-VERTICAL Cross-Shaped
D-CROSS
Horizontally Wide
B-HORIZONTAL
Circular
C-CIRCULAR
Vertically Long
A-VERTICAL
B
Circular
C-CIRCULAR
Vertically Long
A-VERTICAL Cross-Shaped
D-CROSS
Circular
C-CIRCULAR
Cross-Shaped
D-CROSS
Horizontally Wide
B-HORIZONTAL](https://image.slidesharecdn.com/presentation-final-250605005538-8baf61b2/85/Multi-View-Design-Patterns-Responsive-Visualization-for-Genomics-Data-5-320.jpg)
![Grammar Extension
24
{ "arrangement": "horizontal", ...,
"trackGroups": [
{ /* Left Matrix Spec */ },
{ /* Right Matrix Spec */ }],
"responsiveSpec": [{
"selectivity": [{
"target": "container", "measure": "width",
"operation": "GT", "threshold": 1000 }],
"spec": {
"trackGroups": [{
"alignment": "overlay",
"tracks": [
{ /* Left-Bottom Matrix Spec */ },
{ /* Right-Top Matrix Spec */ },
}]}}]}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Complementa
B
Side-By-Side Comparative Matrices
A
https://gosling.js.org](https://image.slidesharecdn.com/presentation-final-250605005538-8baf61b2/85/Multi-View-Design-Patterns-Responsive-Visualization-for-Genomics-Data-24-320.jpg)
![Grammar Extension
25
{ "arrangement": "horizontal", ...,
"trackGroups": [
{ /* Left Matrix Spec */ },
{ /* Right Matrix Spec */ }],
"responsiveSpec": [{
"selectivity": [{
"target": "container", "measure": "width",
"operation": "GT", "threshold": 1000 }],
"spec": {
"trackGroups": [{
"alignment": "overlay",
"tracks": [
{ /* Left-Bottom Matrix Spec */ },
{ /* Right-Top Matrix Spec */ },
}]}}]}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Complementa
B
Side-By-Side Comparative Matrices
A
https://gosling.js.org](https://image.slidesharecdn.com/presentation-final-250605005538-8baf61b2/85/Multi-View-Design-Patterns-Responsive-Visualization-for-Genomics-Data-25-320.jpg)
![Grammar Extension
26
{ "arrangement": "horizontal", ...,
"trackGroups": [
{ /* Left Matrix Spec */ },
{ /* Right Matrix Spec */ }],
"responsiveSpec": [{
"selectivity": [{
"target": "container", "measure": "width",
"operation": "GT", "threshold": 1000 }],
"spec": {
"trackGroups": [{
"alignment": "overlay",
"tracks": [
{ /* Left-Bottom Matrix Spec */ },
{ /* Right-Top Matrix Spec */ },
}]}}]}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Complementa
B
Side-By-Side Comparative Matrices
A
https://gosling.js.org](https://image.slidesharecdn.com/presentation-final-250605005538-8baf61b2/85/Multi-View-Design-Patterns-Responsive-Visualization-for-Genomics-Data-26-320.jpg)
Multi-View Design Patterns & Responsive Visualization for Genomics Data
- 1. Multi-View Design Patterns & Responsive Visualization for Genomics Data Sehi L'Yi Nils Gehlenborg Biomedical Informatics, Harvard Medical School @sehi_lyi @ngehlenborg
- 4. In many hospitals, screens are very old, and this often relates to the amount of information that we can show. ... [The name of a front-end engineer] always thinks of how this interface looks like on small screens. — Project Manager of Interactive Data Portal1 1 CGAP (Clinical Genome Analysis Platform): https://cgap.hms.harvard.edu/ “
- 5. In many hospitals, screens are very old, and this often relates to the amount of information that we can show. ... [The name of a front-end engineer] always thinks of how this interface looks like on small screens. — Project Manager of Interactive Data Portal1 1 CGAP (Clinical Genome Analysis Platform): https://cgap.hms.harvard.edu/ “ How To Support Smaller Screens In Genomics Data Visualizations? Responsive Multi-View How To Support Smaller Screens In Genomics Data Visualizations? Vertically Long A-VERTICAL Cross-Shaped D-CROSS Horizontally Wide B-HORIZONTAL Circular C-CIRCULAR Vertically Long A-VERTICAL B Circular C-CIRCULAR Vertically Long A-VERTICAL Cross-Shaped D-CROSS Circular C-CIRCULAR Cross-Shaped D-CROSS Horizontally Wide B-HORIZONTAL
- 6. Study Process 6 Survey Responsive Designs Extended Visualization Grammar Multi-view Design Patterns Usability Issues Existing Responsive Designs
- 7. Study Process 7 Survey Responsive Designs Extended Visualization Grammar Change Arrangement Filter ... Multi-view Design Patterns Usability Issues Existing Responsive Designs
- 8. Study Process 8 Survey Responsive Designs Extended Visualization Grammar Change Arrangement Filter ... Gosling (L'Yi et al. TVCG 2021) Multi-view Design Patterns Usability Issues Existing Responsive Designs
- 9. Survey Design • 40 out of 188 Tools1-2 • Web-based genome-mapped data visualization • 5 Logical Resolutions (3 Devices x 2 Mobile Orientations, Chrome DevTools) • 1920×1080 (Desktop) • 1024×768 (Google Nexus Tablet) • 375×812 (iPhone X) 9 1 GenoCAT (http://genocat.tools/) 2 awesome-genome-visualization (https://cmdcolin.github.io/awesome-genome-visualization/)
- 10. Key Insights • Genomics Data Visualization Uses MANY Views • Average 8.1 views (SD=9.4) by default • Majority (52.5%) allowed adding views 10 (Chen et al. TVCG 2021) "Less than five views" → Screen scalability challenges responsive designs
- 11. Key Insights • Genomics Data Visualization Uses MANY Views • The Four Composition Patterns Are Most Typical (92.5%) 11 Vertical Horizontal Circular Cross-shaped
- 12. Key Insights • Genomics Data Visualization Uses MANY Views • The Four Composition Patterns Are Most Typical (92.5%) 12 Vertical Horizontal Circular Cross-shaped (70%) Horizontal juxtaposition was most popular (Chen et al. TVCG 2021)
- 13. Key Insights • Genomics Data Visualization Uses MANY Views • The Four Composition Patterns Are Most Typical (92.5%) • Responsive Designs Are Limited In Genomics Tools 13 Responsive Design Taxonomy (Kim, Moritz & Hullman, CGF 2021)
- 14. Key Insights • Genomics Data Visualization Uses MANY Views • The Four Composition Patterns Are Most Typical (92.5%) • Responsive Designs Are Limited In Genomics Tools 14 Usability Categories (Wu et al. TVCG 2020) View Out View Group Out Visualization Out Unreadable Occlusion The Number of Usability Issues Found
- 15. Key Insights • Genomics Data Visualization Uses MANY Views • The Four Composition Patterns Are Most Typical (92.5%) • Responsive Designs Are Limited In Genomics Tools 15 Usability Categories (Wu et al. TVCG 2020) View Out View Group Out Visualization Out Unreadable Occlusion The Number of Usability Issues Found Examples Reproduced Using Gosling Readability Issue View/Visualization Out of Viewport
- 16. Responsive Multi-View Designs 16 Usability Issues Tasks Composition Patterns Literature Review Responsive Design Genomics Visualization Multi-view Design
- 17. Responsive Multi-View Designs 17 Change Arrangement View Composition Taxonomy (Kim et al., Gleicher et al., L'Yi et al., ...) 52 views
- 18. Responsive Multi-View Designs 18 Change Arrangement View Composition Taxonomy (Kim et al., Gleicher et al., L'Yi et al., ...) Mirrored View-wise Juxtaposition L'Yi et al. TVCG 2022
- 19. Responsive Multi-View Designs 19 Change Arrangement View Composition Taxonomy (Kim et al., Gleicher et al., L'Yi et al., ...)
- 20. Responsive Multi-View Designs 20 Change Arrangement View Composition Taxonomy (Kim et al., Gleicher et al., L'Yi et al., ...) Complementary Matrix Liu and Shen, CHI 2015
- 21. Responsive Multi-View Designs 21 Change Arrangement View Composition Taxonomy (Kim et al., Gleicher et al., L'Yi et al., ...) Change Layout (Nusrat et al., Kim et al.)
- 22. Responsive Multi-View Designs 22 Change Arrangement View Composition Taxonomy (Kim et al., Gleicher et al., L'Yi et al., ...) Change Layout (Nusrat et al., Kim et al.) Shorten Distance (L'Yi et al.) Overlay Guideline (L'Yi et al.)
- 23. Responsive Multi-View Designs 23 Change Arrangement View Composition Taxonomy (Kim et al., Gleicher et al., L'Yi et al., ...) Change Layout (Nusrat et al., Kim et al.) Shorten Distance (L'Yi et al.) Overlay Guideline (L'Yi et al.)
- 24. Grammar Extension 24 { "arrangement": "horizontal", ..., "trackGroups": [ { /* Left Matrix Spec */ }, { /* Right Matrix Spec */ }], "responsiveSpec": [{ "selectivity": [{ "target": "container", "measure": "width", "operation": "GT", "threshold": 1000 }], "spec": { "trackGroups": [{ "alignment": "overlay", "tracks": [ { /* Left-Bottom Matrix Spec */ }, { /* Right-Top Matrix Spec */ }, }]}}]} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Complementa B Side-By-Side Comparative Matrices A https://gosling.js.org
- 25. Grammar Extension 25 { "arrangement": "horizontal", ..., "trackGroups": [ { /* Left Matrix Spec */ }, { /* Right Matrix Spec */ }], "responsiveSpec": [{ "selectivity": [{ "target": "container", "measure": "width", "operation": "GT", "threshold": 1000 }], "spec": { "trackGroups": [{ "alignment": "overlay", "tracks": [ { /* Left-Bottom Matrix Spec */ }, { /* Right-Top Matrix Spec */ }, }]}}]} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Complementa B Side-By-Side Comparative Matrices A https://gosling.js.org
- 26. Grammar Extension 26 { "arrangement": "horizontal", ..., "trackGroups": [ { /* Left Matrix Spec */ }, { /* Right Matrix Spec */ }], "responsiveSpec": [{ "selectivity": [{ "target": "container", "measure": "width", "operation": "GT", "threshold": 1000 }], "spec": { "trackGroups": [{ "alignment": "overlay", "tracks": [ { /* Left-Bottom Matrix Spec */ }, { /* Right-Top Matrix Spec */ }, }]}}]} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Complementa B Side-By-Side Comparative Matrices A https://gosling.js.org
- 27. VERTICAL A B C D E Feature-Wise Locus-Wise Locus-Wise Feature-Wise & Locus-Wise Feature-Wise & Locus-Wise Task Types Filter Pin Track Group to Left (1:N Comparison) Pin Track Group to Left/Top (1:N Comparison) Filter Tracks Filter Data Filter Track Groups Filter Tracks Filter Data Filter Track Groups Filter Track Groups Filter Tracks Filter Data Filter Track Groups Filter Tracks Filter Data Filter Track Groups Filter Data Pin Track to Top (1:N Comparison) Shared Vertical Lines Overlay Reference Track (1:N Comparison) Overlay Summary Values (1:N Comparison) Shared Vertical Lines Overlay Reference Track (1:N Comparison) Overlay Summary Values (1:N Comparison) Shared Vertical Lines Shared Cross Lines Smaller Height Convert to Linear Layout Linear Layout with Rotated Matrix Smaller Track Viewport (i.e., within-track scrolls) Smaller Track Viewport (i.e., within-track scrolls) Smaller Height Smaller Width Maintain Aspect Ratio Change Layout Shorten Distance Overlay Guideline A-VERTICAL A-VERTICAL Juxtapose Along Diagonal Juxtapose Temporally (e.g., show matrices one-by-one) Juxtapose Temporally (e.g., tabbed panel) Superpose Track Groups (e.g., superposed lines) Juxtapose Track-Wise Side-By-Side Track-Groups Superpose Track Groups Small Multiples Use Explicit Encoding (e.g., summary chart) Use Explicit Encoding (e.g., summary difference) Use Explicit Encoding (e.g., summary difference) Superpose Tracks (e.g., superposed lines) Use Explicit Encoding (e.g., show cell-by-cell differences) Superposition (e.g., cells with different sizes) Change Arrangement Juxtapose Temporally (e.g., show overview separately) Usability Issues Viewport Composition HORIZONTAL CIRCULAR CROSS Entire Vis Track Group Track Approaches
- 28. C-1 C-2 C-3 C-4 | Track & | | Track & Track Track 1 - N Circular C-CIRCULAR Proksee, RegulomeExplorer, SynCircos, SeqViz, Synteny browser 2 - 4 Track & 4 -4 Track & & & C-5 C-7 C-6 Track Track Track 1 - N & & Track & & & & Track Track 1 - N & & & Track Track 4 - 4 & & Vertically Long A-VERTICAL A-1 A-2 A-3 A-4 A-5 IGV.js, UCSC Genome Browser, JBrowse, ... 0 - N 2D Track & & & Track & Track & Track Track & & & & Z # HiGlass, Juicebox.js Cross-Shaped D-CROSS 1 - N & Parallel/Horizontal Juxtaposition | Serial/Vertical Juxtaposition Z Flow Layout # Grid Layout Track Group Track Track The Number of Tools Thickness 1 - N Track Track & Track Track & | | Xena Horizontally Wide B-HORIZONTAL
- 29. Takeaway 29 Responsive Designs Needed In Genomics Visualization 4 Composition Patterns 8.1 Views On Average Screen Scalability Issues Survey Approaches Change Arrangement Change Layout Filter Shorten Distance Overlay Guideline Grammar ... Concept Is Intuitive 👍 Dependencies to Gosling 👎
- 30. Multi-View Design Patterns & Responsive Visualization for Genomics Data Sehi L'Yi Nils Gehlenborg Biomedical Informatics, Harvard Medical School @sehi_lyi @ngehlenborg https://gosling.js.org/