Slide 1

Slide 1 text

Related genes ideogram Augment gene search through genome visualization Eric Weitz [email protected] https://github.com/eweitz/ideogram Design Affinity Group meeting Broad Institute of MIT and Harvard 2022-05-06

Slide 2

Slide 2 text

Help users explore and discover genomic data by widening search results. Challenges: ● Users must know genes a priori that are related to a gene they search ● Scarce screen real estate for new UI components ● Visualizing search results in genomic space is useful but hard Design goal

Slide 3

Slide 3 text

Related results in domain-specific search UIs

Slide 4

Slide 4 text

Localizable results are mapped in generic search UIs

Slide 5

Slide 5 text

Localizable results are mapped in generic search UIs

Slide 6

Slide 6 text

Related genes For a given gene, it is easy to find two kinds of related genes: ● Interacting genes: Adjacent nodes in the same biochemical pathway. ● Paralogs: evolutionarily similar genes in same species. Often have comparable roles in different pathways.

Slide 7

Slide 7 text

Related genes for LPL https://eweitz.github.io/ideogram/related-genes?q=LPL

Slide 8

Slide 8 text

Why chromosomes? ● Gene expression often correlates in genomic neighborhood. ● Cytogenetic features (e.g. centromeres, stalks) can explain null results. ● Ideogram geometry is familiar, compact, and engaging

Slide 9

Slide 9 text

Design considerations Benefits of showing related genes in an ideogram: ● Space efficient. Short, wide row of chromosomes uses empty page real estate. ● Easy interaction. Plotting genes as large features makes them easy to see and click. ● Domain specific. Users engage and recall more with tailored graphics than generic lists.

Slide 10

Slide 10 text

Big, easily clickable features. Triggers new genomic search. Brief, noticeable legend and call to action Short and wide Show many genomic search results in the space of a few rows. Design at a glance

Slide 11

Slide 11 text

Tooltips for related genes aid discovery https://eweitz.github.io/ideogram/related-genes?q=LPL

Slide 12

Slide 12 text

Upcoming feature: paralog neighborhoods https://eweitz.github.io/ideogram/related-genes?q=LPL

Slide 13

Slide 13 text

Thank you! Eric Weitz ([email protected], https://github.com/eweitz) More about Ideogram.js: ● Gene search recommendation UI: https://eweitz.github.io/ideogram/related-genes ● Source code: https://github.com/eweitz/ideogram ● 20+ examples: https://eweitz.github.io/ideogram