Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing genome visualizations with IdeogramJS

Af15066cec0a8e1a8d0fd0a3bae02965?s=47 Eric Weitz
April 24, 2020

Designing genome visualizations with IdeogramJS

This presentation discusses how to make compelling interactive graphics for genomics using Ideogram.js (https://github.com/eweitz/ideogram), a tool for chromosome visualization on the web.

It discusses a range of use cases, and shows you how to: depict clinical variants, compare your genes to a plant’s, show where BRCA1 is, visualize genome alignments, see how cancer wreaks genomic havoc, explore how space flight affects gene expression, and more.

Design considerations are also discussed, including layout, annotations, labels, and legends.


Eric Weitz

April 24, 2020


  1. Eric Weitz Broad Institute of MIT and Harvard 2020-04-24 https://github.com/eweitz/ideogram

    Designing genome visualizations with Ideogram.js
  2. Outline

  3. What is an ideogram?

  4. Human genome as karyotype

  5. Human genome as ideogram

  6. Parts of a chromosome

  7. p arm q arm Parts of a chromosome

  8. Parts of a chromosome

  9. Ideograms are widely used

  10. Outline

  11. Ideogram.js • • • •

  12. Ideogram.js is a reusable component • • • • •

  13. Ideogram.js in React

  14. Ideogram.js in Jupyter Notebooks

  15. Outline

  16. Show the human genome https://eweitz.github.io/ideogram/human

  17. https://eweitz.github.io/ideogram/mouse View genome on phone or tablet

  18. See any of 100+ eukaryotic genomes https://eweitz.github.io/ideogram/eukaryotes

  19. Where do these genes from species A exist in species

  20. Customize layout

  21. Visualize genome alignments

  22. Explore differential expression across the genome

  23. Use Terra to learn how to run Ideogram data pipeline

  24. Compare chromosomal events across cancer samples

  25. Inform clinicians and patients about genetics ACMG 59 genes. Red:

    BRCA1. Purple: highly-weighted genes from NCBI Gene.
  26. Load BED files

  27. Show gene location

  28. More use cases, live examples, source code: https://eweitz.github.io/ideogram

  29. Outline

  30. Geometry and orientation

  31. Multiple rows for space-efficient layout

  32. Annotations: tracks, layout, color, shape

  33. Labels and legends

  34. Thank you! • • • •