ideogram
Version:
Chromosome visualization with D3.js
81 lines (64 loc) • 2.34 kB
HTML
<html>
<head>
<title>Annotations, tracks | Ideogram</title>
<style>body {font: 12px Arial; line-height: 19.6px;}</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
</head>
<body>
<h1>Annotations, tracks | Ideogram</h1>
<a href="../">Back to overview</a> |
<a href="annotations-overlaid">Previous</a> |
<a href="annotations-external-data">Next</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, artificially categorized
as "pathogenic" (red), "uncertain significance" (grey) or "benign" (green).
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 config = {
organism: 'human',
orientation: 'vertical',
chrWidth: 8,
annotationsPath: '../../data/annotations/1000_virtual_snvs.json',
annotationTracks: annotationTracks,
annotationHeight: annotHeight
};
if (typeof ideogram !== 'undefined') {
d3.select(ideogram.config.container + '> div').remove();
}
ideogram = new Ideogram(config);
}
drawIdeogram('triangle');
</script>
</body>
</html>