Related genes ideogram - augment gene search through genome visualization

Related genes ideogram is a reusable Ideogram.js web component that recommends interesting genes based on a queried gene.

Related genes can be A) interacting genes, i.e. immediately adjacent in a biochemical pathway; or B) paralogous genes, which are closely evolutionarily related to the queried gene. Design considerations like compactness, domain illustrations, and interactivity are summarized. The new "paralog neighborhood" feature is also previewed.

Delivered as a 5-minute "lightning talk" at a remote session of the Design Affinity Group of the Broad Institute of MIT and Harvard, the talk elicited excitement and positive feedback among designers and biologists.

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

Transcript

1. Related genes ideogram Augment gene search through genome visualization Eric Weitz eweitz@broadinstitute.org https://github.com/eweitz/ideogram Design Affinity Group meeting Broad Institute of MIT and Harvard 2022-05-06
2. 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
3. Related results in domain-specific search UIs
4. Localizable results are mapped in generic search UIs
5. Localizable results are mapped in generic search UIs
6. 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.
7. Related genes for LPL https://eweitz.github.io/ideogram/related-genes?q=LPL
8. 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
9. 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.
10. 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
11. Tooltips for related genes aid discovery https://eweitz.github.io/ideogram/related-genes?q=LPL
12. Upcoming feature: paralog neighborhoods https://eweitz.github.io/ideogram/related-genes?q=LPL
13. Thank you! Eric Weitz (eweitz@broadinstitute.org, 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