Overview | Ideogram

Ideogram.js is a JavaScript library for chromosome visualization. Ideogram supports drawing and animating genome-wide datasets.

In the examples below, genomic data is fetched from servers and rendered on the client using D3.js.

Chromosomes 1-22, X and Y rendered vertically.
Chromosomes 1-19, X and Y rendered horizontally, with labeled bands.
Genomes for many organisms, using data fetched via API.
Search and display similar genes across organisms.
Compare, PAR
Simple relations between two chromosomes.
Compare, structure
Relations between two chromosomes, using color and opacity.
Annotations, basic
Location of a gene on a chromosome.
Annotations, overlaid
Overlaid features on chromosomes.
Annotations, tracks
Stacked features on chromosomes.
Annotations, external data
Data fetched from a third party API, annotated by shape and color.
Annotations, file URL
Features parsed from standard file formats, e.g. BED, loaded via URL.
Annotations, histogram
Use shape to show feature distributions on chromosomes.
Annotations, animated
Genome-wide transitions in expression over time.
Annotations, heatmap.
Use color to show feature distributions on chromosomes.
Geometry, collinear
All chromosomes arranged in one line.
Layout, small
Chromosomes surrounded by other content.
Layout, tabs
Tab containers and scrolling for large ideograms.
Move and resize a slider-like widget to change genomic coordinates in focus.
Ploidy, basic
Diploid genome of a human female.
Ploidy, rearrangements
Loss and gain of cytogenetic arms and chromatids.
Ploidy, recombination
Gene conversion and double chromosome crossover among chromatids.
Multiple, trio
Three human genomes.
Multiple, primates
Three primate genomes, with orthologs annotated for comparison.

Ideogram is developed by Eric Weitz.