ideogram
Version:
Chromosome visualization with D3.js
144 lines (139 loc) • 6.29 kB
HTML
<html>
<head>
<title>Overview | Ideogram</title>
<style>
body {
font: 12px Arial;
line-height: 19.6px;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 99%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.gallery img {
height: 200px;
width: 300px;
}
</style>
</head>
<body>
<h1>Overview | Ideogram</h1>
<p>
<a href="https://github.com/eweitz/ideogram">Ideogram.js</a> is a
JavaScript library for chromosome visualization. Ideogram supports drawing
and animating genome-wide datasets.
</p>
<p>
In the examples below, raw
<a href="http://ghr.nlm.nih.gov/handbook/howgeneswork/genelocation">cytogenetic band</a>
data is read in and rendered entirely on the client using
<a href="http://d3js.org/" target="_blank">D3.js</a>.
</p>
<div class="gallery">
<a href="human"><img src="img/human_ideogram.png"/></a>
<div class="desc"><a href="human">Human</a>. Chromosomes 1-22, X and Y rendered vertically.</div>
</div>
<div class="gallery">
<a href="mouse"><img src="img/mouse_ideogram.png"/></a>
<div class="desc"><a href="mouse">Mouse</a>. Chromosomes 1-19, X and Y rendered horizontally, with labeled bands.</div>
</div>
<div class="gallery">
<a href="eukaryotes"><img src="img/eukaryotes_ideogram.png"/></a>
<div class="desc"><a href="eukaryotes">Eukaryotes</a>. Genomes for many organisms, using data fetched via API.</div>
</div>
<div class="gallery">
<a href="homology-basic"><img src="img/homology_basic_ideogram.png"/></a>
<div class="desc"><a href="homology-basic">Homology, basic</a>. Simple relations between two chromosomes.</div>
</div>
<div class="gallery">
<a href="homology-advanced"><img src="img/homology_advanced_ideogram.png"/></a>
<div class="desc"><a href="homology-advanced">Homology, advanced</a>. Relations between two chromosomes, using color and opacity.</div>
</div>
<div style="clear:both"></div>
<div class="gallery">
<a href="homology-interspecies"><img src="img/homology_interspecies_ideogram.png"/></a>
<div class="desc"><a href="homology-interspecies">Homology, interspecies</a>. Relations between two chromosomes, each from a different taxon.</div>
</div>
<div class="gallery">
<a href="annotations-basic"><img src="img/annotations_basic_ideogram.png"/></a>
<div class="desc"><a href="annotations-basic">Annotations, basic</a>. Location of a gene on a chromosome.</div>
</div>
<div class="gallery">
<a href="annotations-overlaid"><img src="img/annotations_overlaid_ideogram.png"/></a>
<div class="desc"><a href="annotations-overlaid">Annotations, overlaid</a>. Overlaid features on chromosomes.</div>
</div>
<div class="gallery">
<a href="annotations-tracks"><img src="img/annotations_tracks_ideogram.png"/></a>
<div class="desc"><a href="annotations-tracks">Annotations, tracks</a>. Stacked features on chromosomes.</div>
</div>
<div class="gallery">
<a href="annotations-external-data"><img src="img/annotations_external_data_ideogram.png"/></a>
<div class="desc"><a href="annotations-external-data">Annotations, external data</a>. Data fetched from a third party API, annotated by shape and color.</div>
</div>
<div style="clear:both"></div>
<div class="gallery">
<a href="annotations-file-url"><img src="img/annotations_file_url_ideogram.png"/></a>
<div class="desc"><a href="annotations-file-url">Annotations, file URL</a>. Features parsed from standard file formats, e.g. BED, loaded via URL.</div>
</div>
<div class="gallery">
<a href="annotations-histogram"><img src="img/annotations_histogram_ideogram.png"/></a>
<div class="desc"><a href="annotations-histogram">Annotations, histogram</a>. Use shape to show feature distributions on chromosomes.</div>
</div>
<div class="gallery">
<a href="annotations-heatmap"><img src="img/annotations_heatmap_ideogram.png"/></a>
<div class="desc"><a href="annotations-heatmap">Annotations, heatmap</a>.<br/> Use color to show feature distributions on chromosomes.</div>
</div>
<div class="gallery">
<a href="annotations-animated"><img src="img/annotations_animated_ideogram.png"/></a>
<div class="desc"><a href="annotations-animated">Annotations, animated</a>. Genome-wide transitions in expression over time.</div>
</div>
<div class="gallery">
<a href="layout-small"><img src="img/layout_small_ideogram.png"/></a>
<div class="desc"><a href="layout-small">Layout, small</a>. Chromosomes surrounded by other content.</div>
</div>
<div style="clear:both"></div>
<div class="gallery">
<a href="brush"><img src="img/brush_ideogram.png"/></a>
<div class="desc"><a href="brush">Brush</a>. Move and resize a slider-like widget to change genomic coordinates in focus.</div>
</div>
<div class="gallery">
<a href="ploidy-basic"><img src="img/ploidy_basic_ideogram.png"/></a>
<div class="desc"><a href="ploidy-basic">Ploidy, basic</a>. Diploid genome of a human female.</div>
</div>
<div class="gallery">
<a href="ploidy-rearrangements"><img src="img/ploidy_rearrangements_ideogram.png"/></a>
<div class="desc"><a href="ploidy-rearrangements">Ploidy, rearrangements</a>. Loss and gain of cytogenetic arms and chromatids.</div>
</div>
<div class="gallery">
<a href="ploidy-recombination"><img src="img/ploidy_recombination_ideogram.png"/></a>
<div class="desc"><a href="ploidy-recombination">Ploidy, recombination</a>. Gene conversion and double chromosome crossover among chromatids.</div>
</div>
<div class="gallery">
<a href="multiple-trio"><img src="img/multiple_trio_ideogram.png"/></a>
<div class="desc"><a href="multiple-trio">Multiple, trio</a>. Three human genomes.</div>
</div>
<div style="clear:both"></div>
<div class="gallery">
<a href="multiple-primates"><img src="img/multiple_primates_ideogram.png"/></a>
<div class="desc"><a href="multiple-primates">Multiple, primates</a>. Three primate genomes, with orthologs annotated for comparison.</div>
</div>
<div style="clear:both"></div>
<p>
Ideogram is developed by <a href="https://github.com/eweitz">Eric Weitz</a>.
</p>
</body>
</html>