ideogram
Version:
Chromosome visualization for the web
155 lines (139 loc) • 6.47 kB
HTML
<html>
<head>
<title>Eukaryotes | Ideogram</title>
<script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/ideogram_favicon.ico">
<style>
body {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>
#container {
float: left;
height: 650px;
width: 70%;
}
#organismList {
float: left;
padding-inline-start: 20px;
}
li ul {
padding: 2px 10px 10px 10px;
}
li ul li {
list-style-type: none;
}
</style>
</head>
<body>
<h1>Eukaryotes | Ideogram</h1>
<a href="../">Overview</a> |
<a href="mouse">Previous</a> |
<a href="orthologs">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/eukaryotes.html" target="_blank">Source</a>
<p>
Ideogram.js can display the genome of any one of hundreds of organisms, using data from
<a href="https://www.ncbi.nlm.nih.gov/assembly">NCBI Assembly</a>.
</p>
<div>
<ul id="organismList">
<li>
Model organisms
<ul>
<li><label for="rattus-norvegicus"><input type="radio" name="org" value="rattus-norvegicus" id="rattus-norvegicus">Rat (Rattus norvegicus)</label></li>
<li><label for="drosophila-melanogaster"><input type="radio" name="org" value="drosophila-melanogaster" id="drosophila-melanogaster">Fly (Drosophila melanogaster)</label>
<li><label for="caenorhabditis-elegans"><input type="radio" name="org" value="caenorhabditis-elegans" id="caenorhabditis-elegans">Worm (Caenorhabditis elegans)</label></li>
<li><label for="danio-rerio"><input type="radio" name="org" value="danio-rerio" id="danio-rerio">Zebrafish (Danio rerio)</label></li>
<li><label for="arabidopsis-thaliana"><input type="radio" name="org" value="arabidopsis-thaliana" id="arabidopsis-thaliana">Thale cress (Arabidopsis thaliana)</label></li>
<li><label for="saccharomyces-cerevisiae"><input type="radio" name="org" value="saccharomyces-cerevisiae" id="saccharomyces-cerevisiae">Yeast (Saccharomyces cerevisiae)</label></li>
</ul>
</li>
<li>
Vertebrates
<ul>
<li><label for="pan-troglodytes"><input type="radio" name="org" value="pan-troglodytes" id="pan-troglodytes">Chimpanzee (Pan troglodytes)</label></li>
<li><label for="macaca-mulatta"><input type="radio" name="org" value="macaca-mulatta" id="macaca-mulatta">Macaque (Macaca mulatta)</label></li>
<li><label for="felis-catus"><input type="radio" name="org" value="felis-catus" id="felis-catus">Cat (Felis catus)</label></li>
<li><label for="canis-lupus-familiaris"><input type="radio" name="org" value="canis-lupus-familiaris" id="canis-lupus-familiaris">Dog (Canis lupus familiaris)</label></li>
<!-- <li><label for="gallus-gallus"><input type="radio" name="org" value="gallus-gallus" id="gallus-gallus">Chicken (Gallus gallus)</label></li> -->
<li><label for="bos-taurus"><input type="radio" name="org" value="bos-taurus" id="bos-taurus">Cow (Bos taurus)</label></li>
<li><label for="sus-scrofa"><input type="radio" name="org" value="sus-scrofa" id="sus-scrofa">Pig (Sus scrofa)</label></li>
</ul>
</li>
<li>
Plants
<ul>
<li><label for="zea-mays"><input type="radio" name="org" value="zea-mays" id="zea-mays">Maize (Zea mays)</label></li>
<li><label for="oryza-sativa"><input type="radio" name="org" value="oryza-sativa" id="oryza-sativa">Rice (Oryza sativa)</label>
<li><label for="solanum-lycopersicum"><input type="radio" name="org" value="solanum-lycopersicum" id="solanum-lycopersicum">Tomato (Solanum lycopersicum)</label></li>
<li><label for="musa-acuminata"><input type="radio" name="org" value="musa-acuminata" id="musa-acuminata">Banana (Musa acuminata)</label></li>
<li><label for="vitis-vinifera"><input type="radio" name="org" value="vitis-vinifera" id="vitis-vinifera">Grape (Vitis vinifera)</label></li>
<li><label for="micromonas-commoda"><input type="radio" name="org" value="micromonas-commoda" id="micromonas-commoda">Green algae (Micromonas commoda)</label></li>
</ul>
</li>
<li>
Insects
<ul>
<li><label for="anopheles-gambiae"><input type="radio" name="org" value="anopheles-gambiae" id="anopheles-gambiae">Mosquito (Anopheles gambiae)</label></li>
<!-- <li><label for="apis-mellifera"><input type="radio" name="org" value="apis-mellifera" id="apis-mellifera">Bee (Apis mellifera)</label></li> -->
</ul>
</li>
<li>
Protozoa
<ul>
<li><label for="plasmodium-falciparum"><input type="radio" name="org" value="plasmodium-falciparum" id="plasmodium-falciparum">Malaria parasite (Plasmodium falciparum)</label></li>
<li><label for="leishmania-donovani"><input type="radio" name="org" value="leishmania-donovani" id="leishmania-donovani">Leishmania parasite (Leishmania donovani)</label></li>
</ul>
</li>
</ul>
<div id="container"></div>
</div>
<script type="text/javascript">
function loadOrganism(org) {
var org, chrHeight, rows, config;
history.pushState(null, null, '?org=' + org);
org = org.split('-').join(' ');
if (
org === 'canis lupus familiaris' ||
org === 'bos taurus' ||
org === 'gallus gallus' ||
org === 'leishmania donovani'
) {
chrHeight = 200;
rows = 2;
} else {
chrHeight = 400;
rows = 1;
}
config = {
organism: org,
container: '#container',
chrWidth: 10,
chrHeight: chrHeight,
rows: rows,
showNonNuclearChromosomes: true
};
ideogram = new Ideogram(config);
}
var org,
d3 = Ideogram.d3;
d3.selectAll('input').on('change', function(d) {
var org;
d3.select(ideogram.config.container + '> div').remove();
// d3.event.preventDefault();
org = d3.select(this).attr('value');
loadOrganism(org);
});
if (window.location.search !== '') {
org = window.location.search.split('=')[1];
} else {
org = 'rattus-norvegicus';
}
d3.select('#' + org).property('checked', true);
loadOrganism(org);
</script>
</body>
</html>