1 of 97

Building Interactive Visualizations of Genomics Data with Gosling

Tutorial VT2, ISMB 2022

Wed, July 6, 9:00 – 13:00 CDT

🦆

Sehi L'Yi

Trevor Manz

Qianwen Wang

Nils Gehlenborg

Biomedical Informatics, Harvard Medical School

2 of 97

Sehi L'Yi

Trevor Manz

Qianwen Wang

Nils Gehlenborg

Instructors

Postdoctoral research fellow in Biomedical Informatics at Harvard Medical School. Interested in designing methods and tools for interactive data visualization.

@WangQianwenToo

Postdoctoral research fellow in Biomedical Informatics at Harvard Medical School. Interested in designing, implementing, evaluating interactive data visualization.

@sehi_lyi

PhD candidate in the Bioinformatics and Integrative Genomics Program at Harvard Medical School. Focused on the intersection of data visualization, bioinformatics, and open-source software.

@trevmanz

Associate Professor of Biomedical Informatics at Harvard Medical School. Interested in designing methods and tools for data visualization across the spectrum of biomedical data.

@ngehlenborg

Introduction (40 min) + five hands-on sessions (160 min)

3 of 97

If You Have Any Questions During Tutorial

Please use the "Q&A" chat on JUNO

In each session, we will also give you opportunities to ask questions

4 of 97

Contact

Technical Questions & Feature Requests

Github Issues: https://github.com/gosling-lang/gos/issues

General Questions

Sehi L'Yi: sehi_lyi@hms.harvard.edu
Trevor Manz: trevor_manz@g.harvard.edu
Qianwen Wang: qianwen_wang@hms.harvard.edu
Nils Gehlenborg: nils@hms.harvard.edu

5 of 97

Tutorial Overview

Total 4 hours w/ an introduction and five hands-on sessions

This is a data visualization-focused tutorial

You will use Google Colab Notebooks & Python with Gos 🦆

Introduction (40 min) + five hands-on sessions (160 min)

6 of 97

Tutorial Goal: What You Are Expected To Learn

Learn ways to author interactive Gosling visualizations in Google Colab using Gos 🦆
Learn the foundations of genomics data visualization
Learn the key concepts of the Grammar of Graphics

Used in many popular visualization tools, e.g., Vega-Lite (Altair), ggplot2

Gain experience with common data visualization techniques

e.g., coordinated interactions, semantic zooming

7 of 97

Schedule (09:00–13:00 CDT)

(09:00–09:40) 🧑‍🏫 Introduction (40 min)
(09:40–12:50) 🧑‍💻 Five hands-on sessions (160 min + 2 ☕️ breaks)

(09:40–10:30) 🧑‍💻 Single Track (50 min) → Link
(10:30–10:45) ☕️ Coffee Break (15 min)
(10:45–11:15) 🧑‍💻 Track Alignment & Local Data (30 min) → Link
(11:15–11:45) 🧑‍💻 Semantic Zooming (30 min) → Link
(11:45–12:00) ☕️ Coffee Break (15 min)
(12:00–12:30) 🧑‍💻 Coordinated Multiple View (30 min) → Link
(12:30–12:50) 🧑‍💻 Share Your Visualizations (20 min) → This Slide Deck

(12:50–13:00) 🧑‍🏫 Closing (10 min)

8 of 97

During Five Hands-on Sessions…

You will read, execute, and modify codes in Google Colab Notebooks

Ensure that you have a Google account

You need the account to use Google Colab notebooks

Introduction (40 min) + five hands-on sessions (160 min)

9 of 97

Setup Instructions for Tutorial VT2�"Building Interactive Visualizations of Genomics Data with Gosling"

If you don't already have one, create a Google account (https://www.google.com/account/about/).
Click on the following link to open a Google Colab notebook.�� https://tinyurl.com/ismb-vt2-test-notebook�
Execute all code blocks.
If you can see visualizations rendered, you are all set!
If you confront any issues, please send an email to us.�� sehi_lyi@hms.harvard.edu

10 of 97

Introduction (Part 1)

Genomics Data Visualization

Presenter: Nils Gehlenborg

12 of 97

Tool Catalogs

Presenter: Nils Gehlenborg

Awesome Genome Visualization

GenoCAT

https://cmdcolin.github.io/awesome-genome-visualization

http://genocat.tools

486 Tools

107 Tools

13 of 97

Taxonomies for Genomics Data Visualization

Goal: create a structured description of genomics visualization techniques

only consider data that is visualized in the sequence context, i.e., genomic location is represented in the visualization
treat genome as a coordinate system

Address concerns separately:

Data Taxonomy, e.g. what data types can be mapped to the genome?
Visualization Taxonomy, e.g., how can the coordinate system be laid out? How can the mapped data be encoded?
Task Taxonomy, e.g., what kind of tasks are users trying to address with genomic data?

14 of 97

Taxonomy

Nusrat, Harbig & Gehlenborg, 2019

15 of 97

Taxonomy

Nusrat, Harbig & Gehlenborg, 2019

16 of 97

Taxonomy

Nusrat, Harbig & Gehlenborg, 2019

Coordinate System: defines how genomic coordinates are mapped into the visualization space

17 of 97

Taxonomy

Nusrat, Harbig & Gehlenborg, 2019

Tracks: a track roughly corresponds to a dataset that maps categorical, quantitative, etc. data to genomic coordinates

18 of 97

Taxonomy

Nusrat, Harbig & Gehlenborg, 2019

View Configurations: a view defines a genomic region that is being visualized and consists of one or more tracks;

multiple views can be linked to each other

19 of 97

Layout

Nusrat, Harbig & Gehlenborg, 2019

20 of 97

Layout

EpiViz

MizBee

Hilbert Curve

HIC3D Viewer

21 of 97

Layout

Linear

Circular

Space-Filling

22 of 97

Arrangement

Nusrat, Harbig & Gehlenborg, 2019

23 of 97

Arrangement

SyntenyExplorer

Cinteny

HiGlass

24 of 97

Arrangement

Serial

Parallel

Orthogonal

25 of 97

Track Alignment

Nusrat, Harbig & Gehlenborg, 2019

26 of 97

Track Alignment

EpiViz

27 of 97

Track Alignment

28 of 97

Track Alignment

29 of 97

Track Alignment

30 of 97

Views

Nusrat, Harbig & Gehlenborg, 2019

31 of 97

Views

SyntenyExplorer

MizBee

34 of 97

Foci

IGV

36 of 97

Taxonomy

Nusrat, Harbig & Gehlenborg, 2019

37 of 97

Challenges in Genomics Data Visualization

Everything is connected

Different data types need to be integrated: sequence, expression levels, metabolites, phenotype information, etc.
Many different types of data need to be loaded into a single software

Large space with sparse distribution of patterns across multiple scales
Many types of patterns along the genome (SNP, epigenomic peaks, genomic rearrangements, etc.)

39 of 97

Introduction (Part 2)

The Gosling Grammar

Presenter: Sehi L'Yi

40 of 97

Gosling

A grammar for scalable and interactive genome-mapped data visualization (L'Yi et al. IEEE TVCG 2022)
Based on a visualization taxonomy (Nusrat et al. Computer Graphics Forum 2019)

41 of 97

Gosling Key Features

Expressiveness

Based on a visualization grammar

Data scalability

Built on HiGlass (Kerpedjiev et al. Genome Biology 2018)

Encoding scalability

Semantic zooming & responsive design

Coordinated interactivity

Zooming, panning, brushing, linking, …

43 of 97

Supported File Formats (as of June 29, 2022)

Plain Datasets (No HiGlass Server)

JSON
CSV (TSV, BED, etc)
BigWig
BAM (with BAI)
VCF (with TBI)

Pre-aggregated Datasets (HiGlass Server)

Vector (1D Quantitative values)
Multi-Vec (N-D Quantitative values)
BEDDB (Any BED-like formats)
Cooler (Matrix)

Details: http://gosling-lang.org/docs/data

44 of 97

Gosling Ecosystem

Gos (Python)

Python functions → Visualization

Jupyter Notebook/Lab & Colab

Preprint (Manz et al. 2022)

Gosling.js (JavaScript/TypeScript)

JSON text → Visualization

Web application/React

Online Editor (https://gosling.js.org)

🦆

45 of 97

Gosling Ecosystem

Gos (Python)

Python functions → Visualization

Jupyter Notebook/Lab & Colab

Preprint (Manz et al. 2022)

Gosling.js (JavaScript/TypeScript)

JSON text → Visualization

Web application/React

Online Editor (https://gosling.js.org)

🦆

Today's Tutorial

46 of 97

The Gosling Grammar: Tracks & Views

Track: The core component of a genomics visualization that defines mappings of genomics data to visual properties

View: A group of tracks that shares the same linked genomic domain

47 of 97

The Gosling Grammar: Tracks & Views

Gosling Visualization

48 of 97

The Gosling Grammar: Tracks & Views

Gosling Visualization

View 1 (Chr1)
View 2 (Chr2)
View 3 (Chr3)

49 of 97

The Gosling Grammar: Tracks & Views

Gosling Visualization

View 1 (Chr1)

Track 1 (Bar)
Track 2 (Ideogram)

View 2 (Chr2)

Track 3 (Bar)
Track 4 (Ideogram)

View 3 (Chr3)

Track 5 (Bar)
Track 6 (Ideogram)

50 of 97

The Gosling Grammar: Tracks & Views

Gosling JSON Spec

��{"views":[� {tracks:[{ … },{ … }]},� {tracks:[{ … },{ … }]},� {tracks:[{ … },{ … }]},�]}

51 of 97

Grammar of Graphics (Wilkinson 1999)

A grammar used to describe and create a wide range of statistical graphics
Adopted and inspired to many visualization libraries

Vega-Lite & Altair
ggplot2

Decomposes visualization into multiple primitives

Mark
Scale
Visual channel
Layer
…

52 of 97

Grammar of Graphics in Gosling: Defining Track

Mark

point,bar,rect,line,area,text,withinLink, etc

Visual channel

x,y,color,size,stroke,strokeWidth

Scale

domain,range

53 of 97

Example: Point mark + Size channel

point mark

size channel

domain

range (px)

Your Data

54 of 97

Example: Point mark + Size channel

point mark

size channel

domain

range (px)

0.2

Your Data

4px

55 of 97

Example: Point mark + Size channel

domain

range (px)

0.2

0.9

point mark

size channel

Your Data

11px

56 of 97

Example: Point mark + Size channel

domain

range (px)

0.2

0.9

point mark

size channel

Your Data

0.6

8px

57 of 97

Example: Point mark + Size channel

domain

range (px)

0.2

0.9

point mark

size channel

Tabularized�(Abstracted) �Genomics Data

0.6

58 of 97

Data Abstraction

All genomics files supported in Gosling (e.g., BigWig, BED, BAM) are internally converted to a tabular representation, having explicit column names. These column names are used to specify visual encoding.

BigWig

0.142�0.321�0.951�0.214�0.041�0.000�…

chr	position	peak
"chr1"	123,000	0.142
"chr1"	124,000	0.321
"chr1"	125,000	0.951
…

Internal Tabular BigWig Data�In Gosling

63 of 97

In Gos…

→ Through Gos API Functions

→ Rendered on Notebooks

64 of 97

Composition Primitives

alignment of tracks (stack, overlay)
arrangement of views (parallel, serial, vertical, horizontal)

67 of 97

In the Following Hands-On Sessions…

Session 1: Single Track

Author custom tracks based on grammar of graphics

Session 2: Track Alignment & Local Data

Compose tracks either by stacking and overlaying (e.g., genes)

Session 3: Semantic Zooming

Use a unique primitive in Gosling to reveal patterns across scales

Session 4: Coordinated Multiple View

Compose multiple views with coordinated interactions

Session 5: Share Your Visualization

Create shareable web-based applications for your Gosling visualizations

68 of 97

Using Google Colab Notebooks

Copy Notebooks

Login using your Google account
Save a copy of a notebook in your Drive
Use the copied notebook

Be aware of mouse cursor positions for scrolling

Gos visualizations use mouse wheel for navigation!

69 of 97

Session 1: Single Track

Author custom tracks based on the Grammar of Graphics

Presenter: Trevor Manz

Link to Google Colab

70 of 97

☕️ Coffee Break (15 min)��10:30–10:45

71 of 97

Session 2: Track Alignment & Local Data

Compose tracks either by stacking and overlaying (e.g., genes)

Presenter: Trevor Manz

Link to Google Colab

72 of 97

Session 3: Semantic Zooming

Use a unique primitive in Gosling to reveal patterns across scales

Presenter: Sehi L'Yi

Link to Google Colab

https://colab.research.google.com/drive/1LlgvoKrAzAqqeryDzjuSiNUqexfFAaJg?usp=sharing

73 of 97

☕️ Coffee Break (15 min)

11:45–12:00

74 of 97

Session 4: Coordinated Multiple Views

Compose multiple views with coordinated interactions

Presenter: Qianwen Wang

Link to Google Colab

75 of 97

Session 5: Share Your Visualization

Create shareable web-based applications for your Gosling visualizations

Presenter: Qianwen Wang

We will use the following slides

76 of 97

Various Ways to Share Visualizations

A URL link that contains a gosling spec
A HTML file
Github Gist + Online Editor

Due to time limits, we do not cover the creation of Streamlit apps and React apps in this tutorial.

Streamlit App (Python)

Please refer to Streamlit-gosling repo

React App (Javascript)

Please refer to gosling doc and gosling-react repo for more details.

77 of 97

A URL Link

https://gosling.js.org

Step 1: Copy the values from the json file we just downloaded to the online editor.
Step 2: Click EXPORT->SAVE URL. A URL will be copied to your clipboard!

https://gosling.js.org/?full=false&spec=(G'arrangementWhorizontalVlinkingIdWidVtitleWComparison%20of%20Micro-C%20and%20Hi-C%20for%20HFFc6%20CellsVviews4%5BG*LDJYdataU2QBXhiRANHi-C'AOUEZS9Y~eUDT%2CG*LDJYdataU2QBXmicroRANMicro-C'AOUEZS9Y~eUDTG%5D%0A)*%20%202b**4!%209'PKj)A%2C2Bs%3A%2F%2Fserver.gosling-lang.org%2Fapi%2Fv1%2Ftileset_info%2F%3FD'fieldWE'chromosomeW7'P'interval4%5B77700000P81000000%5DG%0A*Jvalue'P'rangeWwarm'PKquantitative')K'typeWL(b'tracks4%5Bb*(2'colorUN'markWrect'YtitleWHFFc6_O'width4375YxU2*'domainP%2C%20Q*Kmatrix'A*'urlWhttpRc-hg38'2)Yheight4375Sj2)YxeUDxeTye9b*)b%5DG*)U4(V'%2CG'W4'Xd%3Dhffc6-YA'Z)A*Dxs'A*KbG**jgenomic'~yUDys9Yy%01~jbZYXWVUTSRQPONLKJGEDBA942*_

the orange string in URL is a compression of the gosling JSON spec using JSONCrush

78 of 97

An HTML File

Step 1: Copy the values from the json file we just downloaded to the online editor.
Step 2: Click EXPORT->HTML. A URL will be copied to your clipboard!

79 of 97

An HTML File

Step 1: Create a HTML file using this template.

Step 2: Replace {your_gosling_spec} with the spec of your Gosling visualization.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

gosling.embed(

document.getElementById('gosling-container'),

{your_gosling_spec}

);

</script>

</body>

</html>

80 of 97

Github Gist + Gosling Editor

Step 1: Create a github gist for the json file of your gosling visualization. Ensure that the name of your json file starts with "gosling.js".

Step 2 (Optional): Add a readme.md file and a title to your gist.

Step 3: You can then share your visualization through https://gosling.js.org/?gist={github_username}/{gist_id}

https://gist.github.com/wangqianwen0418/6f092d419fecae20273de919f5a04284

https://gosling.js.org/?gist=wangqianwen0418/6f092d419fecae20273de919f5a04284

81 of 97

Github Gist + Gosling Editor

Step 1: Create a github gist for the json file of your gosling visualization. Ensure that the name of your json file starts with "gosling.js".

Step 2 (Optional): Add a readme.md file and a title to your gist.

Step 3: You can then share your visualization through https://gosling.js.org/?gist={github_username}/{gist_id}

https://gist.github.com/wangqianwen0418/6f092d419fecae20273de919f5a04284

https://gosling.js.org/?gist=wangqianwen0418/6f092d419fecae20273de919f5a04284

82 of 97

Hands-On Exercises

Choose one visualization you created in previous sessions:

Save the Gosling spec of the visualization
Create an HTML file for the visualization
Store the Gosling spec as a Github Gist and open the visualization through the Gosling online editor

84 of 97

Story of the Name “Gosling”

Grammar Of Scalable Linked Interactive Nucleotide Graphics
Baby goose

85 of 97

Story of the Name “Gosling”

Grammar Of Scalable Linked Interactive Nucleotide Graphics
Baby goose
Raymond Gosling

86 of 97

Story of the Name “Gosling”

Grammar Of Scalable Linked Interactive Nucleotide Graphics
Baby goose
Raymond Gosling

http://gosling-lang.org/about/

87 of 97

Resources

All tutorial materials� http://gosling-lang.org/tutorials/ismb� https://github.com/gosling-lang/gosling-tutorial
Documentation� http://gosling-lang.org/
Source codes (GitHub)� https://github.com/gosling-lang
Online editor and examples� https://gosling.js.org/
Papers� L'Yi et al. Gosling, IEEE TVCG 2022� Manz et al. Gos, OSF Preprint 2022

88 of 97

Contact

Technical Questions & Feature Requests

Github Issues: https://github.com/gosling-lang/gos/issues

General Questions

Sehi L'Yi: sehi_lyi@hms.harvard.edu
Trevor Manz: trevor_manz@g.harvard.edu
Qianwen Wang: qianwen_wang@hms.harvard.edu
Nils Gehlenborg: nils@hms.harvard.edu

89 of 97

#goslinglang

90 of 97

ISMB Tutorial Feedback Survey

Link

91 of 97

APPENDIX

Applications of Using Gosling

92 of 97

Online Editor (https://gosling.js.org)

A interactive website that enables users to author Gosling.js visualization

93 of 97

Gosling React Template (https://github.com/gosling-lang/gosling-react)

A template GitHub repository to use Gosling.js and its API in a React application

demo: https://gosling-lang.github.io/gosling-react/

94 of 97

GenoREC

A knowledge-based recommendation model & interface for genome-mapped data visualization

Gosling.js is used as a rendering engine
Preprint: Pandey et al. OSF 2022

95 of 97

Interactive Browser for Somatic Structural Variation

A web-based interactive multi-scale visualization tool that enables browsing individual samples in multiple levels of scale from whole genome, chromosome, and individual genes to raw reads

(Demo: https://sehilyi.github.io/gosling-app-sv/)

96 of 97

Interactive Browser for Somatic Structural Variation

A web-based interactive multi-scale visualization tool that enables browsing individual samples in multiple levels of scale from whole genome, chromosome, and individual genes to raw reads

(Demo: https://sehilyi.github.io/gosling-app-sv/)

97 of 97

Interactive Browser for Somatic Structural Variation

A web-based interactive multi-scale visualization tool that enables browsing individual samples in multiple levels of scale from whole genome, chromosome, and individual genes to raw reads

(Demo: https://sehilyi.github.io/gosling-app-sv/)

1 of 97

2 of 97

3 of 97

4 of 97

5 of 97

6 of 97

7 of 97

8 of 97

9 of 97

10 of 97

11 of 97

12 of 97

13 of 97

14 of 97

15 of 97

16 of 97

17 of 97

18 of 97

19 of 97

20 of 97

21 of 97

22 of 97

23 of 97

24 of 97

25 of 97

26 of 97

27 of 97

28 of 97

29 of 97

30 of 97

31 of 97

32 of 97

33 of 97

34 of 97

35 of 97

36 of 97

37 of 97

38 of 97

39 of 97

40 of 97

41 of 97

42 of 97

43 of 97

44 of 97

45 of 97

46 of 97

47 of 97

48 of 97

49 of 97

50 of 97

51 of 97

52 of 97

53 of 97

54 of 97

55 of 97

56 of 97

57 of 97

58 of 97

59 of 97

60 of 97

61 of 97

62 of 97

63 of 97

64 of 97

65 of 97

66 of 97

67 of 97

68 of 97

69 of 97

70 of 97

71 of 97

72 of 97

73 of 97

74 of 97

75 of 97

76 of 97

77 of 97

78 of 97

79 of 97

80 of 97