ideogram
Version:
Chromosome visualization for the web
182 lines (175 loc) • 8.22 kB
HTML
<html>
<head>
<meta name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Overview | Ideogram</title>
<link rel="icon" type="image/x-icon" href="img/ideogram_favicon.ico">
<style>
body {height: 100%; font: 14px Arial; line-height: 19.6px; padding: 0 15px;}
a, a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a, a:hover, a:visited, a:active {color: #0366d6;}
</style>
<style>
.cards {
display: flex;
flex-wrap: wrap;
max-width: 1800px;
}
.card {
box-sizing: border-box;
border: 1px solid #ccc;
max-width: 180px;
margin: 0 5px 10px 5px;
}
@media (max-width: 600px) {
body { padding: 0 10px}
.cards { justify-content: space-around; }
.card { max-width: calc(50% - 10px); }
}
.card:hover {
border: 1px solid #777;
}
.card img {
width: 99%;
height: auto;
}
.card > div {
padding: 15px 5px;
text-align: center;
}
</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>
Examples below show how Ideogram can be used to research and report findings on <a href="geometry-collinear">cancer</a>, <a href="annotations-external-data">clinical variants</a>, <a href="annotations-histogram">gene expression</a>, <a href="multiple-primates">evolution</a>, <a href="ploidy-recombination">agriculture</a>, and more.
</p>
<div class="cards">
<div class="card">
<a href="human"><img src="img/human_ideogram.png"/></a>
<div><a href="human">Human</a><br/> Chromosomes 1-22, X and Y rendered vertically.</div>
</div>
<div class="card">
<a href="mouse"><img src="img/mouse_ideogram.png"/></a>
<div><a href="mouse">Mouse</a><br/> Chromosomes 1-19, X and Y rendered horizontally, with labeled bands.</div>
</div>
<div class="card">
<a href="eukaryotes"><img src="img/eukaryotes_ideogram.png"/></a>
<div><a href="eukaryotes">Eukaryotes</a><br/> Genomes for many organisms, using data fetched via API.</div>
</div>
<div class="card">
<a href="orthologs"><img src="img/orthologs_ideogram.png"/></a>
<div><a href="orthologs">Orthologs</a><br/> Search and display similar genes among diverse organisms.</div>
</div>
<div class="card">
<a href="homology-basic"><img src="img/homology_basic_ideogram.png"/></a>
<div><a href="homology-basic">Compare, PAR</a><br/> Simple relations between two chromosomes.</div>
</div>
<div class="card">
<a href="genome-alignment"><img src="img/genome_alignment_ideogram.png"/></a>
<div><a href="genome-alignment">Genome alignment</a><br/> Chromosomal translocations across organisms.</div>
</div>
<div class="card">
<a href="annotations-basic"><img src="img/annotations_basic_ideogram.png"/></a>
<div><a href="annotations-basic">Annotations, basic</a><br/> Location of a gene on a chromosome.</div>
</div>
<div class="card">
<a href="annotations-overlaid"><img src="img/annotations_overlaid_ideogram.png"/></a>
<div><a href="annotations-overlaid">Annotations, overlaid</a><br/> Overlaid features on chromosomes.</div>
</div>
<div class="card">
<a href="annotations-tracks"><img src="img/annotations_tracks_ideogram.png"/></a>
<div><a href="annotations-tracks">Annotations, tracks</a><br/> Stacked features on chromosomes.</div>
</div>
<div class="card">
<a href="annotations-external-data"><img src="img/annotations_external_data_ideogram.png"/></a>
<div><a href="annotations-external-data">Annotations, external data</a><br/> Data fetched from a third party API, annotated by shape and color.</div>
</div>
<div class="card">
<a href="annotations-file-url"><img src="img/annotations_file_url_ideogram.png"/></a>
<div><a href="annotations-file-url">Annotations, file URL</a><br/> Features parsed from standard file formats, e.g. BED, loaded via URL.</div>
</div>
<div class="card">
<a href="annotations-histogram"><img src="img/annotations_histogram_ideogram.png"/></a>
<div><a href="annotations-histogram">Annotations, histogram</a><br/> Use shape to show feature distributions on chromosomes.</div>
</div>
<div class="card">
<a href="annotations-animated"><img src="img/annotations_animated_ideogram.png"/></a>
<div><a href="annotations-animated">Annotations, animated</a><br/> Genome-wide transitions in expression over time.</div>
</div>
<div class="card">
<a href="annotations-heatmap"><img src="img/annotations_heatmap_ideogram.png"/></a>
<div><a href="annotations-heatmap">Annotations, heatmap</a><br/> Use color to show feature distributions on chromosomes.</div>
</div>
<div class="card">
<a href="related-genes"><img src="img/related_genes_ideogram.png"/></a>
<div><a href="related-genes">Related genes</a><br/> Discover genes similar to your gene of interest.</div>
</div>
<div class="card">
<a href="differential-expression"><img src="img/differential_expression_ideogram.png"/></a>
<div><a href="differential-expression">Differential expression</a><br/> Integrate faceted search and tables for richer exploration.</div>
</div>
<div class="card">
<a href="geometry-collinear"><img src="img/geometry_collinear_ideogram.png"/></a>
<div><a href="geometry-collinear">Geometry, collinear</a><br/> All chromosomes arranged in one line.</div>
</div>
<div class="card">
<a href="layout-small"><img src="img/layout_small_ideogram.png"/></a>
<div><a href="layout-small">Layout, small</a><br/> Chromosomes surrounded by other content.</div>
</div>
<div class="card">
<a href="layout-tabs"><img src="img/layout_tabs_ideogram.png"/></a>
<div><a href="layout-small">Layout, tabs</a><br/> Tab containers and scrolling for large ideograms.</div>
</div>
<div class="card">
<a href="brush"><img src="img/brush_ideogram.png"/></a>
<div><a href="brush">Brush</a><br/> Move and resize a slider-like widget to change genomic coordinates in focus.</div>
</div>
<div class="card">
<a href="cursor"><img src="img/cursor_ideogram.png"/></a>
<div><a href="cursor">Cursor</a><br/> Allow a click/cursor event handler for the chromosome.</div>
</div>
<div class="card">
<a href="highlights-basic"><img src="img/highlights_basic_ideogram.png"/></a>
<div><a href="highlights-basic">Highlights, basic</a><br/> Visually emphasize a chromosome.</div>
</div>
<div class="card">
<a href="highlights-groups"><img src="img/highlights_groups_ideogram.png"/></a>
<div><a href="highlights-groups">Highlights, groups</a><br/> Distinguish sets of chromosomes.</div>
</div>
<div class="card">
<a href="color-chromosomes"><img src="img/color_chromosomes_ideogram.png"/></a>
<div><a href="color-chromosomes">Color, chromosomes</a><br/> Color arms and centromeres.</div>
</div>
<div class="card">
<a href="ploidy-basic"><img src="img/ploidy_basic_ideogram.png"/></a>
<div><a href="ploidy-basic">Ploidy, basic</a><br/> Diploid genome of a human female.</div>
</div>
<div class="card">
<a href="ploidy-rearrangements"><img src="img/ploidy_rearrangements_ideogram.png"/></a>
<div><a href="ploidy-rearrangements">Ploidy, rearrangements</a><br/> Loss and gain of cytogenetic arms and chromatids.</div>
</div>
<div class="card">
<a href="ploidy-recombination"><img src="img/ploidy_recombination_ideogram.png"/></a>
<div><a href="ploidy-recombination">Ploidy, recombination</a><br/>Gene conversion and double chromosome crossover among chromatids.</div>
</div>
<div class="card">
<a href="multiple-trio"><img src="img/multiple_trio_ideogram.png"/></a>
<div><a href="multiple-trio">Multiple, trio</a><br/>Three human genomes.</div>
</div>
<div class="card">
<a href="multiple-primates"><img src="img/multiple_primates_ideogram.png"/></a>
<div><a href="multiple-primates">Multiple, primates</a><br/>Three primate genomes, with orthologs annotated for comparison.</div>
</div>
</div>
<p>
Ideogram is developed by <a href="https://github.com/eweitz">Eric Weitz</a>.
</p>
</body>
</html>