ideogram
Version:
Chromosome visualization for the web
219 lines (181 loc) • 5.6 kB
HTML
<html>
<head>
<title>Create custom | Ideogram</title>
<style>
body {
font: 14px Arial;
line-height: 19.6px;
max-width: 1200px;
}
#ideo-container {
float: left;
width: 80%;
}
#_ideogram {
margin-left: 15px;
}
#config-container {
float: left;
width: 20%;
padding-left: 0;
}
#config-container div {
border-top: 1px solid grey;
padding-top: 5px;
}
select {
margin-bottom: 7px;
}
ul {
padding: 2px 0 10px 0px;
margin-top: 0;
}
li {
list-style-type: none;
}
</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>Create custom | Ideogram</h1>
<a href="../">Overview</a> |
<a href="annotations-overlaid">Previous</a> |
<a href="annotations-external-data">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/.html" target="_blank">Source</a>
<p>
Create a custom ideogram by configuring options below.
</p>
<div id="config-container">
Organism
<select id="organism-menu">
<option>Homo sapiens (human)</option>
<option>Mus musculus (mouse)</option>
<option>Rattus norvegicus (rat)</option>
<option>Drosophila melanogaster (fruit fly)</option>
<option>Caenorhabditis elegans (worm)</option>
<option>Custom</option>
</select>
<span id="custom-organism-input-container" style="display: none;">
<input id="custom-organism-input" type="text"/><button id="custom-organism-button">Go</button>
</span>
Ploidy
<select id="ploidy-menu">
<option>Haploid (1)</option>
<option>Diploid (2)</option>
</select>
<br/>
Orientation
<select id="orientation-menu">
<option>Vertical</option>
<option>Horizontal</option>
</select>
<br/>
<div>
<label>
<label for="annotations-checkbox"><input type="checkbox" value="annotations-checkbox" id="annotations-checkbox">Annotations</label>
</label>
<ul id="annotations-menu-set" style="display: none">
<li>
Dataset
<select id="dataset-menu">
<option>1000 virtual SNVs</option>
<option>10 virtual CNVs</option>
<option>All human genes</option>
<option>Custom</option>
</select>
<span id="dataset-input-container" style="display: none;">
<input id="dataset-input" type="text"/><button id="dataset-button">Go</button>
</span>
</li>
<li>
Shape
<select id="shape-menu">
<option>Triangle</option>
<option>Circle</option>
<option>Rectangle</option>
<option>Custom</option>
</select>
<span id="shape-input-container" style="display: none;">
<input id="shape-input" type="text"/><button id="shape-button">Go</button>
</span>
</li>
<li>
Color
<select id="color-menu">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
<option>Custom</option>
</select>
<span id="custom-color-input-container" style="display: none;">
<input id="custom-color-input" type="text"/><button id="custom-color-button">Go</button>
</span>
</li>
</ul>
</div>
</div>
<div id="ideo-container">
</div>
<script type="text/javascript">
var d3 = Ideogram.d3,
organism = 'human',
ploidy = 1,
orientation = 'vertical',
shape = 'triangle',
color = 'red';
function getSelection(menu) {
return menu.options[menu.selectedIndex].text.toLowerCase();
}
function updateIdeoParams(menu) {
var id, ideoParam, selection;
id = d3.select(menu).attr('id');
ideoParam = id.split('-')[0];
selection = getSelection(menu);
if (ideoParam === 'organism') {
selection = selection.split(' (')[0].replace(' ', '-');
} else if (ideoParam === 'ploidy') {
selection = parseInt(selection.split(' (')[1].replace(')', ''));
}
if (selection === 'custom') {
return;
}
window[ideoParam] = selection;
d3.select('#_ideogram').remove();
drawIdeogram();
}
d3.selectAll('select').on('change', function(d) {
updateIdeoParams(this);
});
d3.selectAll('input[type=checkbox]').on('change', function(d) {
var name, menuSet, displayValue;
name = d3.select(this).attr('id').split('-')[0];
menuSet = d3.select('#' + name + '-menu-set');
displayValue = menuSet.style('display') === 'none' ? '' : 'none';
menuSet.style('display', displayValue);
});
function drawIdeogram() {
var annotationTracks = [
{id: 'pathogenicTrack', displayName: 'Pathogenic', color: '#F00', shape: shape},
{id: 'uncertainSignificanceTrack', displayName: 'Uncertain significance', color: '#CCC', shape: shape},
{id: 'benignTrack', displayName: 'Benign', color: '#8D4', shape: shape}
];
var config = {
organism: organism,
orientation: orientation,
container: '#ideo-container',
ploidy: ploidy,
// chrWidth: 8,
chrHeight: 300,
// chrMargin: 1,
// annotationsPath: '../../data/annotations/1000_virtual_snvs.json',
// annotationTracks: annotationTracks,
// annotationHeight: 3.5
};
var ideogram = new Ideogram(config);
}
drawIdeogram(organism, shape);
</script>
</body>
</html>