Pro Yearly is on sale from $80 to $50! »

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 (, 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

    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

  17. View genome on phone or tablet

  18. See any of 100+ eukaryotic genomes

  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:

  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! • • • •