ideogram
Version:
Chromosome visualization for the web
230 lines (192 loc) • 7.29 kB
HTML
<html>
<head>
<title>Compare whole genomes | Ideogram</title>
<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>
#ideogram-container {
float: left;
margin-left: 100px;
height: 650px;
width: 70%;
}
#options {
float: left;
}
ul {
padding: 2px 10px 10px 10px;
}
ul li {
list-style-type: none;
padding-inline-start: 20px;
}
</style>
<script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/ideogram_favicon.ico">
</head>
<body>
<h1>Compare whole genomes | Ideogram</h1>
<a href="../">Overview</a> |
<a href="annotations-heatmap">Previous</a> |
<a href="layout-small">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/synteny.html" target="_blank">Source</a>
<div>
<ul id="options">
Chromosome scale
<li>
<input type="radio" name="chromosome-scale" id="absolute" value="absolute" checked>
<label for="absolute">Absolute</label>
</li>
<li>
<input type="radio" name="chromosome-scale" id="relative" value="relative">
<label for="relative">Relative</label>
</li>
<br/>
Orientation
<li>
<input type="radio" name="orientation" id="vertical" value="vertical" checked>
<label for="vertical">Vertical</label>
</li>
<li>
<input type="radio" name="orientation" id="horizontal" value="horizontal">
<label for="horizontal">Horizontal</label>
</li>
</div>
<div id="ideogram-container"></div>
</div>
<script type="text/javascript">
var initialized = false;
function onIdeogramLoad() {
var chrs, humanChrs, mouseChrs, syntenicRegions, humanTaxid, mouseTaxid;
chrs = ideogram.chromosomes;
humanTaxid = ideogram.getTaxid('human');
mouseTaxid = ideogram.getTaxid('mouse');
humanChrs = chrs[humanTaxid];
mouseChrs = chrs[mouseTaxid];
syntenicRegions = [];
// MTOR gene
range1 = {chr: humanChrs['1'], start: 11106531, stop: 11262557};
range2 = {chr: mouseChrs['4'], start: 148448582, stop: 148557685};
syntenicRegions.push({'r1': range1, 'r2': range2});
// PTEN gene
range3 = {chr: humanChrs['10'], start: 87864470, stop: 87965472};
range4 = {chr: mouseChrs['19'], start: 32758445, stop: 32820028};
syntenicRegions.push({'r1': range3, 'r2': range4});
// GAD2 gene
range5 = {chr: humanChrs['10'], start: 26216810, stop: 26300961}
range6 = {chr: mouseChrs['2'], start: 22622663, stop: 22690346};
syntenicRegions.push({'r1': range5, 'r2': range6});
ideogram.drawSynteny(syntenicRegions);
}
// function onIdeogramLoad() {
// // These genes were fetched via the Orthologs example in Ideogram, e.g.:
// // https://eweitz.github.io/ideogram/orthologs?gene=KDM5A&org=homo-sapiens&org2=arabidopsis-thaliana&backend=orthodb
// var chrs, humanChrs, mouseChrs, syntenicRegions, humanTaxid, mouseTaxid,
// range1, range2;
// chrs = ideogram.chromosomes;
// humanTaxid = ideogram.getTaxid('human');
// // plantTaxid = ideogram.getTaxid('thale cress'); // Arabidopsis thaliana
// plantTaxid = ideogram.getTaxid('mus-musculus'); // Mouse
// humanChrs = chrs[humanTaxid];
// plantChrs = chrs[plantTaxid];
// syntenicRegions = [];
// // GTF2B gene
// range1 = {chr: humanChrs['1'], start: 88853213, stop: 88891499};
// range2 = {chr: plantChrs['3'], start: 3199907, stop: 3201642};
// syntenicRegions.push({'r1': range1, 'r2': range2});
// // E2F4 gene
// range1 = {chr: humanChrs['16'], start: 67192154, stop: 67198917};
// range2 = {chr: plantChrs['1'], start: 17634696, stop: 17637808};
// syntenicRegions.push({'r1': range1, 'r2': range2});
// // Gtf2e2 gene
// range1 = {chr: humanChrs['8'], start: 30658240, stop: 30578317};
// range2 = {chr: plantChrs['4'], start: 10984520, stop: 10982516};
// syntenicRegions.push({'r1': range1, 'r2': range2});
// // NFYC gene
// range1 = {chr: humanChrs['1'], start: 40691698, stop: 40771602};
// range2 = {chr: plantChrs['1'], start: 20451082, stop: 20452670};
// syntenicRegions.push({'r1': range1, 'r2': range2});
// // KDM5A gene
// range1 = {chr: humanChrs['12'], start: 389319, stop: 280056};
// range2 = {chr: plantChrs['1'], start: 23553231, stop: 23544553};
// syntenicRegions.push({'r1': range1, 'r2': range2});
// ideogram.drawSynteny(syntenicRegions);
// document.querySelector('#_ideogram').setAttribute('width', 1000);
// }
// Record app state in URL
function updateUrl(params) {
var urlParams = Object.keys(params).map(key => {
return key + '=' + params[key];
}).join('&');
history.pushState(null, null, '?' + urlParams);
}
function parseUrlParams() {
var rawParams = document.location.search;
var urlParams = {};
var param, key, value;
if (rawParams !== '') {
rawParams = rawParams.split('?')[1].split('&');
rawParams.forEach(rawParam => {
param = rawParam.split('=');
key = param[0];
value = param[1];
urlParams[key] = value;
});
}
return urlParams;
}
function checkButtons() {
var urlParams = parseUrlParams();
for (var param in urlParams) {
var value = urlParams[param];
document.querySelectorAll('input[name=' + param + ']').forEach(option => {
if (option.id.includes(value)) {
var button = 'input[name=' + param + ']#' + value;
document.querySelector(button).checked = true;
}
});
}
}
function updateIdeogram() {
if (initialized === false) {
checkButtons();
}
var chromosomeScale = document.querySelector('input[name=chromosome-scale]:checked').id;
var orientation = document.querySelector('input[name=orientation]:checked').id;
updateUrl({'chromosome-scale': chromosomeScale, orientation: orientation});
if (chromosomeScale === 'absolute') {
chrHeight = 44;
chrMargin = 3;
} else {
chrHeight = 40;
chrMargin = 3;
}
config = {
// organism: ['human', 'thale cress'],
organism: ['human', 'mus musculus'],
orientation: orientation,
geometry: 'collinear',
chromosomeScale: chromosomeScale,
chrHeight: chrHeight,
chrMargin: chrMargin,
container: '#ideogram-container',
onLoad: onIdeogramLoad
}
ideogram = new Ideogram(config);
initialized = true;
}
radioButtons = document.querySelectorAll('input[type=radio]');
radioButtons.forEach(function(radioButton) {
radioButton.addEventListener('click', function() {
updateIdeogram();
});
});
updateIdeogram();
</script>
</body>
</html>