126 lines
9.2 KiB
HTML
126 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<!-- $Id: graphDemo.html 47770 2024-07-25 18:40:49Z evgeniev $ -->
|
|
<html lang="en" >
|
|
<head >
|
|
<title>NCBI Sequence Viewer 3.50.0 Graph Tracks Demo</title>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<!-- Mobile properties -->
|
|
<meta name="HandheldFriendly" content="True">
|
|
<meta name="MobileOptimized" content="320">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/cgv/static/django_uswds/uswds/css/uswds.css" />
|
|
|
|
<link rel="stylesheet" href="/cgv/static/nwds/css/nwds.css" />
|
|
<link rel="stylesheet" href="/cgv/static/nwds/css/header.css" />
|
|
<link rel="stylesheet" href="/cgv/static/nwds/css/footer.css" />
|
|
<link rel="stylesheet" href="/cgv/static/nwds/css/form.css" />
|
|
|
|
<link rel="stylesheet" href="css/uswds-fix.css" />
|
|
|
|
<style>
|
|
main { font-size: 1.4em; padding-left: 2rem;}
|
|
html { font-size: 10px; font-family: Roboto,sans-serif; }
|
|
h2 {
|
|
color: #336699;
|
|
font-family: Verdana, Georgia;
|
|
font-size: 108%;
|
|
font-weight: bold;
|
|
}
|
|
.content {margin: 1em; font-size:13px;}
|
|
.content h1 { font-size: 2em; }
|
|
</style>
|
|
<!-- Favicons -->
|
|
<link rel="shortcut icon" type="image/ico" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon.ico" />
|
|
<link rel="icon" type="image/png" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon.png" />
|
|
|
|
<link rel="icon" type="image/png" sizes="192x192" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-192.png" />
|
|
|
|
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
|
|
<link rel="apple-touch-icon-precomposed" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-57.png">
|
|
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
|
|
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-72.png">
|
|
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
|
|
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-114.png">
|
|
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-144.png">
|
|
|
|
<meta name="robots" content="index, follow"/>
|
|
<meta name="description" content="NCBI Sequence Viewer"/>
|
|
<!-- applog meta tags -->
|
|
<meta name="ncbi_app" content="sviewer-js" />
|
|
<script src="/cgv/static/js/jquery.js"></script>
|
|
<script src="js/sviewer.js"></script>
|
|
<script>
|
|
var loadSV = function(id, idx) {
|
|
var params = [
|
|
'embedded=true&appname=graphdemo&id=NC_000001.10&tracks=[key:alignment_track,name:T388218,display_name:HG01879%20low_coverage%20(SRR1597416),id:T388218,category:Genomic%20SRA%20Alignments,dbname:SRA,annots:SRR1597416,Layout:AdaptiveSeq,StatDisplay:15,Color:Show%20Differences,UnalignedTailsMode:glyph,HideSraAlignments:none,sort_by:,LinkMatePairAligns:false,ShowAlnStat:false,AlignedSeqFeats:false,Label:false,GraphColor:LightBlue,GraphHeight:100,shown:true,order:19]&assm_context=GCF_000001405.25&label=3&spacing=1&v=142000000:143800000',
|
|
'embedded=true&appname=graphdemo&id=NC_000001.10&tracks=[key:alignment_track,name:T388218,display_name:HG01879%20low_coverage%20(SRR1597416),id:T388218,category:Genomic%20SRA%20Alignments,dbname:SRA,annots:SRR1597416,Layout:AdaptiveSeq,StatDisplay:15,Color:Show%20Differences,UnalignedTailsMode:glyph,HideSraAlignments:none,sort_by:,LinkMatePairAligns:false,ShowAlnStat:false,AlignedSeqFeats:false,Label:false,GraphColor:LightGreen,GraphHeight:50,shown:true,order:19]&assm_context=GCF_000001405.25&label=3&spacing=1&v=142000000:143800000',
|
|
'embedded=true&appname=graphdemo&id=NC_000001.10&tracks=[key:graph_overlay,name:SV-Anon8,display_name:SV-Anon8 - graph_overlay,category:Others,subtracks:tr3|tr2|tr1,annots:graph_overlay,scale:linear,height:120,shown:true][key:graph_track,name:bbb,display_name:GSM923423%20HudsonAlpha_RnaSeq_ECC-1_DMSO_4hr_longPolyA,uid:tr3,annots:NA000011432.1,style:histogram,scale:linear,sdthresh:5,fixed_scale:false,clip:false,color:deeppink,ocolor:red,opacity:80,shown:false][key:graph_track,name:aaa,display_name:GSM923420%20HudsonAlpha_RnaSeq_A549_DEX_100nM_longPolyA,uid:tr2,annots:NA000011426.1,style:histogram,scale:linear,sdthresh:5,fixed_scale:false,clip:false,color:tomato,ocolor:red,opacity:80,shown:true][key:graph_track,name:SV-Anon7,display_name:GSM923419%20HudsonAlpha_RnaSeq_SK-N-SH_longPolyA,uid:tr1,annots:NA000011424.1,style:histogram,scale:linear,sdthresh:5,fixed_scale:false,clip:false,color:darkcyan,ocolor:red,opacity:80,shown:false]&assm_context=GCF_000001405.13&v=202440805:202441338',
|
|
'embedded=true&appname=graphdemo&id=GU301088&from:0&len:1680&tracks=[key:graph_track,name:A,shown:false,layout:overlay,style:line%20graph,uid:A,scale:linear,color:red][key:graph_track,uid:B,layout:overlay,name:B,style:line%20graph,scale:linear,color:green,height:40,shown:false][key:graph_track,name:C,scale:linear,color:blue,style:line%20graph,height:80,shown:false,layout:overlay,uid:C][key:graph_overlay,subtracks:A|B|C,height:200,name:Linear%20Interpolation][key:graph_track,name:A1,shown:false,layout:overlay,style:line%20graph,scale:linear,color:red,uid:A1][key:graph_track,layout:overlay,name:B1,uid:B1,style:line%20graph,scale:linear,color:green,height:40,shown:false][key:graph_track,name:C1,scale:linear,color:blue,style:line%20graph,height:80,shown:false,layout:overlay,uid:C1][key:graph_overlay,name:Piecewise%20Interpolation,subtracks:A1|B1|C1,height:200][key:graph_track,name:A2,shown:false,layout:overlay,style:line%20graph,scale:linear,color:red,uid:A2][key:graph_track,layout:overlay,name:B2,uid:B2,style:line%20graph,scale:linear,color:green,height:40,shown:false][key:graph_track,name:C2,scale:linear,color:blue,style:line%20graph,height:80,shown:false,layout:overlay,uid:C2][key:graph_overlay,name:No%20Interpolation,subtracks:A2|B2|C2,height:200]&url=https://ftp.ncbi.nlm.nih.gov/toolbox/gbench/samples/interpolation_piecewise.wig&url=https://ftp.ncbi.nlm.nih.gov/toolbox/gbench/samples/interpolation_linear.wig&url=https://ftp.ncbi.nlm.nih.gov/toolbox/gbench/samples/interpolation_none.wig'
|
|
]
|
|
var app = SeqView.App.findAppByDivId(id) || new SeqView.App(id);
|
|
app.reload(params[idx]);
|
|
}
|
|
SeqViewOnReady(function() {
|
|
loadSV('SViewer0', 0);
|
|
loadSV('SViewer1', 2);
|
|
});
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body >
|
|
<div id="header"></div>
|
|
|
|
<nav class="ncbi-topnav">
|
|
<ul class="ncbi-topnav-list">
|
|
<li><a href="." target="_self">NCBI Sequence Viewer Home</a></li>
|
|
<li><a href="/tools/sviewer" target="_blank">Help</a></li>
|
|
<li><a href="/tools/sviewer/release-notes" target="_blank">Release Notes</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<main id="main_content" accesskey="3">
|
|
<div class="content">
|
|
<h1>Sequence Viewer Graph tracks demo</h1>
|
|
<h2>Introduction</h2>
|
|
<p/>
|
|
These examples demonstrate a way to set graph tracks color and height, and an ability of Sequence Viewer to combine several Graph tracks in a Graph Overlay track.
|
|
<p/>
|
|
<p/>
|
|
<ul>
|
|
<input type="radio" name="radiodemo0" id="demo_0" checked="checked" onclick="loadSV('SViewer0',0)"/>
|
|
<label for="demo_0"><b>Graph track parameters: GraphColor:LightBlue,GraphHeight:100</b></label>
|
|
<br/>
|
|
<input type="radio" name="radiodemo0" id="demo_1" onclick="loadSV('SViewer0',1)"/>
|
|
<label for="demo_1"><b>Graph track parameters: GraphColor:LightGreen,GraphHeight:50</b></label>
|
|
</ul>
|
|
</p>
|
|
<div id="SViewer0" class="SeqViewerApp"></div>
|
|
<p/>
|
|
<ul>
|
|
<input type="radio" name="radiodemo1" id="demo_2" checked="checked" onclick="loadSV('SViewer1',2)"/>
|
|
<label for="demo_2"><b>Simple case - graph overlay uses standard graph tracks</b></label>
|
|
<br/>
|
|
<input type="radio" name="radiodemo1" id="demo_3" onclick="loadSV('SViewer1',3)"/>
|
|
<label for="demo_3"><b>Complicated case - three graph overlays use uploaded tracks</b></label>
|
|
</ul>
|
|
</p>
|
|
<div id="SViewer1" class="SeqViewerApp"></div>
|
|
</div>
|
|
|
|
</main>
|
|
<div id="footer"></div>
|
|
<script>
|
|
$(document).ready(function(){
|
|
$('#header').load("header.html");
|
|
$('#footer').load("footer.html");
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|