ideogram
Version:
Chromosome visualization for the web
68 lines (61 loc) • 2.06 kB
HTML
<html>
<head>
<title>Annotations, 2D heatmap | 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>
#chrMargin {
position: relative;
top: 5px;
}
#chrMarginContainer {
position: relative;
top: -6px;
}
</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, 2D heatmap | 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/geometry-collinear.html" target="_blank">Source</a>
<p>
Gene expression in all cells of four <a href="https://en.wikipedia.org/wiki/Oligodendroglioma">brain cancer</a>
samples, showing deletion of 1p.
Data from <a href="https://github.com/broadinstitute/inferCNV">inferCNV</a>.
See <a href="geometry-collinear">Geometry, collinear</a> for a more integrated example.
</p>
<script type="text/javascript">
d3 = Ideogram.d3;
var legend = [{
name: 'Expression level',
rows: [
{name: 'Low', color: '#33F'},
{name: 'Normal', color: '#CCC'},
{name: 'High', color: '#F33'}
]
}];
config = {
organism: 'human',
orientation: 'vertical',
chromosome: '1',
chrHeight: 450,
showBandLabels: false,
legend: legend,
heatmapThresholds: [0, 0.13, 0.27, 0.4, 0.53, 0.67, 0.8, 0.93, 1.1, 1.2, 1.33, 1.47, 1.6, 1.73, 1.87, 2],
annotationHeight: 3,
annotationsLayout: 'heatmap-2d',
annotationsPath: 'https://www.googleapis.com/storage/v1/b/ideogram/o/oligodendroglioma%2finfercnv.observations.optimized.txt?alt=media'
}
ideogram = new Ideogram(config);
</script>
</body>
</html>