ideogram
Version:
Chromosome visualization for the web
188 lines (157 loc) • 6.54 kB
HTML
<html>
<head>
<title>Annotations, external data | 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, external data | Ideogram</h1>
<a href="../">Overview</a> |
<a href="annotations-tracks">Previous</a> |
<a href="annotations-file-url">Next</a> |
<a href="https://github.com/eweitz/ideogram/blob/gh-pages/annotations-external-data.html" target="_blank">Source</a>
<p>
The <a href="https://www.acmg.net/">American College of Medical Genetics and
Genomics</a> (ACMG) recommends that laboratories performing clinical
sequencing seek and report certain mutations in
<a href="https://www.ncbi.nlm.nih.gov/clinvar/docs/acmg/">the genes depicted
here.</a>
</p>
<div id="container"></div>
<script type="text/javascript">
/**
* This function gets genomic coordinate data for ACMG genes from NCBI EUtils.
* EUtils docs: https://www.ncbi.nlm.nih.gov/books/NBK25500/
* Ideogram.js then draws those genes as annotations on chromosomes.
*/
function getAndDrawAcmgGenes() {
var acmgGenes, i, annots, geneClause, geneID, geneIDs, topWeight,
eutils, esearch, esummary, url, defaultParams,
ideo = this;
ideo.annotDescriptions = {annots: {}}
geneIDs = [];
annots = [];
// EUtils is a web API to access NCBI data
eutils = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/';
defaultParams = '?db=gene&retmode=json&retmax=100';
// Use ESearch to get NCBI Gene ID for gene name, e.g. BRCA1 -> 672
esearch = eutils + 'esearch.fcgi' + defaultParams;
// Use ESummary to get genomic coordinates for given gene IDs
esummary = eutils + 'esummary.fcgi' + defaultParams;
acmgGenes = [
'APC', 'MYH11', 'ACTA2', 'TMEM43', 'DSP', 'PKP2', 'DSG2', 'DSC2',
'BRCA1', 'BRCA2', 'SCN5A', 'RYR2', 'LMNA', 'MYBPC3', 'COL3A1', 'GLA',
'APOB', 'LDLR', 'MYH7', 'TPM1', 'PRKAG2', 'TNNI3', 'MYL3', 'MYL2',
'ACTC1', 'RET', 'PCSK9', 'BMPR1A', 'SMAD4', 'TNNT2', 'TP53', 'TGFBR1',
'TGFBR2', 'SMAD3', 'KCNQ1', 'KCNH2', 'MLH1', 'MSH2', 'MSH6', 'PMS2',
'RYR1', 'CACNA1S', 'FBN1', 'MEN1', 'MUTYH', 'NF2', 'OTC', 'SDHD',
'SDHAF2', 'SDHC', 'SDHB', 'STK11', 'PTEN', 'RB1', 'TSC1', 'TSC2',
'VHL', 'WT1', 'ATP7B'
];
// Batch request all ACMG genes
geneClause = '(' + acmgGenes.join('[symbol] OR ') + '[symbol])';
topWeight = 0;
weights = [];
url = esearch + '&term=Homo-sapiens[Organism] AND ' + geneClause;
d3.json(url).then(function(data) {
geneIDs = data.esearchresult.idlist;
// Batch request genomic coordinates for all ACMG genes
url = esummary + '&id=' + geneIDs.join(',');
d3.json(url).then(function(data) {
var result, gene, chr, loc, start, stop, weight;
for (i = 0; i < geneIDs.length; i++) {
geneID = geneIDs[i];
result = data.result[geneID];
if (result.currentid !== '' || acmgGenes.indexOf(result.name) === -1 ) {
// currentid case occurs when one gene symbol in a taxon maps to
// multiple gene. It seems to be annotation-run noise.
// result.name case occurs when gene has a non-canonical alias
// matching the gene symbol.
// Ignore both.
continue;
}
gene = result.name;
chr = result.chromosome;
loc = result.locationhist[0]; // better than 'genomicinfo'
start = loc.chrstart;
stop = loc.chrstop;
weight = result.geneweight;
if (result.weight > topWeight) {
topWeight = result;
}
////
// This is the annotations API
////
annots.push({
name: gene, // required
chr: chr, // required
start: start, // required
stop: stop, // required
weight: weight // optional
});
var clinvarText = 'Pathogenic variants';
var clinvarBase = 'https://www.ncbi.nlm.nih.gov/clinvar';
var clinvarUrl =
'https://www.ncbi.nlm.nih.gov/clinvar' +
'?term=' + gene + '%5Bgene%5D%20AND%20%22clinsig%20pathogenic%22%5BProperties%5D';
var clinvarLink =
'ClinVar: <a target="_blank" href="' + clinvarUrl + '">' + clinvarText + '</a>';
var fullName = result.description
// Add properties like fullName or clinvarLink for later use in hyperlinkGene
ideo.annotDescriptions.annots[gene] = {
fullName,
clinvarLink
}
}
// NCBI assigns each gene a weight based on how well it is characterized.
// http://www.ncbi.nlm.nih.gov/books/NBK3841/#EntrezGene.Sort_by
// Gene weight is a rough proxy for general biomedical relevance.
// Higher weight, more important.
annots.sort(function(a, b) {
return b.weight - a.weight;
});
// This block highlights the 10 most important ACMG genes.
for (i = 0; i < annots.length; i++) {
color = (i < 10) ? '#825' : '#BAB';
annots[i].shape = 'triangle';
annots[i].color = color;
// BRCA1 is the most widely-recognized gene name. Make it stand out.
if (annots[i].name === 'BRCA1') {
annots[i].shape = 'triangle';
annots[i].color = '#F00';
}
}
ideogram.drawAnnots(annots);
});
});
}
function enhanceTooltipContent(annot) {
var term = '(' + annot.name + '[gene])+AND+(Homo+sapiens[orgn])';
var url = 'https://ncbi.nlm.nih.gov/gene/?term=' + term;
var description = this.annotDescriptions.annots[annot.name];
annot.displayName =
'<a target="_blank" href="' + url + '">' + annot.name + '</a><br/>' +
description.fullName + '<br/><br/>' +
description.clinvarLink + '<br/>';
return annot
}
var d3 = Ideogram.d3;
var config = {
organism: 'human',
resolution: 550,
chrHeight: 300,
annotationHeight: 4,
onLoad: getAndDrawAcmgGenes,
onWillShowAnnotTooltip: enhanceTooltipContent
};
var ideogram = new Ideogram(config);
</script>
</body>
</html>