ideogram
Version:
Chromosome visualization for the web
96 lines (78 loc) • 2.76 kB
HTML
<html>
<head>
<title>Annotations, tracks | 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>
<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>Annotations, tracks | 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/annotations-tracks.html" target="_blank">Source</a>
<p>
1000 <a href="https://github.com/eweitz/ideogram/blob/ca64a3c51e1b5ecaae89d2422ffc408565743644/scripts/create_annots.py#L68">
randomly generated</a> SNVs across the human genome.
See also <a href="annotations-track-filters">Annotations, track filters</a>.
<br/>
<br/>
Annotation shape:
<select id="shape-menu">
<option>Triangle</option>
<option>Circle</option>
<option>Rectangle</option>
<option>Narrow rectangle</option>
</select>
</p>
<script type="text/javascript">
var d3 = Ideogram.d3;
var annotHeight = 3.5;
d3.selectAll('select').on('change', function() {
var shape = this.options[this.selectedIndex].text.toLowerCase();
if (shape === 'narrow rectangle') {
shape =
'm0,0 l 0 ' + (2 * annotHeight) +
'l ' + annotHeight/2 + ' 0' +
'l 0 -' + (2 * annotHeight) + 'z';
}
drawIdeogram(shape);
});
function drawIdeogram(shape) {
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 legend = [{
name: 'Clinical significance (simulated)',
rows: [
{name: 'Pathogenic', color: '#F00', shape: shape},
{name: 'Uncertain significance', color: '#CCC', shape: shape},
{name: 'Benign', color: '#8D4', shape: shape}
]
}];
var config = {
organism: 'human',
orientation: 'vertical',
chrWidth: 8,
annotationsPath: '../../data/annotations/1000_virtual_snvs.json',
annotationTracks: annotationTracks,
annotationHeight: annotHeight,
legend: legend
};
if (typeof ideogram !== 'undefined') {
d3.select(ideogram.config.container + '> div').remove();
}
ideogram = new Ideogram(config);
}
drawIdeogram('triangle');
</script>
</body>
</html>