-
Notifications
You must be signed in to change notification settings - Fork 72
/
eukaryotes.html
155 lines (140 loc) · 6.36 KB
/
eukaryotes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE 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="/ideogram">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,
dataDir: 'dist/data/bands/native/'
};
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>