NCBI BLAST Graphical Summary using HTML/CSS
This is a simple tutorial for designing a webpage for displaying the graphical summary of biological sequence alignment similar to the output of the NCBI BLAST+ program using HTML and CSS languages. In this tutorial, I have given few example hits (in bars) that match all range of bit scores (mentioned by color key).
NCBI BLAST Graphical Summary
NCBI BLAST is a most popular bioinformatics framework for finding local similarity between two or more biological sequences. It addresses a fundamental problem in bioinformatics research. The heuristic algorithm it uses is much faster than other approaches, such as calculating an optimal alignment. This emphasis on speed is vital to making the algorithm practical on the huge genome databases currently available, although subsequent algorithms can be even faster.
In NCBI BLAST, the graphic is an overview of the database sequences aligned to the query sequence. These are represented horizontal bars colored coded by score and showing the extent of the alignment on the query sequence. Separate aligned regions on the same database sequence are connected by a thin grey line. Mousing over an alignment shows the database sequence title. Clicking the line link to the sequence alignment itself in the Alignments section of the result.
Source Code
HTML: index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>NCBI Blast Result</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<div id="graphic" class="hidden shown" style="zoom: 1;">
<div id="grapArea">
<div id="grBlastHits">
<div id="df">Mouse over to see the title, click to show alignments</div>
<div id="clkey">
<div class="clKeyTl"> Color key for alignment scores</div>
<div class="leftGr masterLen">
<div class="clkey">
<span class="black ck"></span><span class="cl"><40</span>
</div>
<div class="clkey">
<span class="blue ck"></span><span class="cl">40-50</span>
</div>
<div class="clkey">
<span class="green ck"></span><span class="cl">50-80</span>
</div>
<div class="clkey">
<span class="purple ck"></span><span class="cl">80-200</span>
</div>
<div class="clkey">
<span class="red ck"></span><span class="cl">>=200</span>
</div>
</div>
<div class="grQuery leftGr masterLen"><span>Query</span></div>
<div class="leftGr grpos">
<div class="scale" style="margin-left:0px"></div>
<div class="scale" style="margin-left:90px"></div>
<div class="scale" style="margin-left:90px"></div>
<div class="scale" style="margin-left:90px"></div>
<div class="scale" style="margin-left:90px"></div>
<div class="scale" style="margin-left:90px"></div>
</div>
<div class="leftGr grpos">
<div class="sdg" style="margin-left: 0px; width: 10px;">1</div>
<div class="sdg" style="margin-left: 72px; width: 20px;">70</div>
<div class="sdg" style="margin-left: 72px; width: 30px;">140</div>
<div class="sdg" style="margin-left: 62px; width: 30px;">210</div>
<div class="sdg" style="margin-left: 62px; width: 30px;">280</div>
<div class="sdg" style="margin-left: 62px; width: 30px;">350</div>
</div>
<div class="leftGr grpos">
<div style="width:17px;" class="h4 white"></div>
<div class="purple">
<a title="Structure of Benzoate Coa Ligase" class="graphSeq h4" href="#" style="width:154px;"></a>
</div>
<div style="width:13px;" class="h1 grey"></div>
<div class="purple">
<a title="Structure of Benzoate Coa Ligase" class="graphSeq h4" href="#" style="width:153px;"></a>
</div>
<div style="width:14px;" class="h1 grey"></div>
<div class="purple">
<a title="Structure of Benzoate Coa Ligase" class="graphSeq h4" href="#" style="width:148px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div class="red">
<a title="Mycobacterium Tuberculosis Ftsz" class="graphSeq h4" href="#" style="width:500px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:27px;" class="h4 white"></div>
<div class="purple">
<a title="Structure of N-terminal domain" class="graphSeq h4" href="#" style="width:170px;"></a>
</div>
<div style="width:1px;" class="h6 black"></div>
<div class="purple">
<a title="Structure of N-terminal domain" class="graphSeq h4" href="#" style="width:166px;"></a>
</div>
<div style="width:1px;" class="h6 black"></div>
<div class="purple">
<a title="Structure of N-terminal domain" class="graphSeq h4" href="#" style="width:135px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div class="red">
<a title="Cell Division Protein" class="graphSeq h4" href="#" style="width:500px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div class="red">
<a title="GTP-bound, double-stranded" class="graphSeq h4" href="#" style="width:500px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div class="red">
<a title="Structure of a Cell Division" class="graphSeq h4" href="#" style="width:413px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:9px;" class="h4 white"></div>
<div class="red">
<a title="Ftsz B. Subtilis" class="graphSeq h4" href="#" style="width:490px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:33px;" class="h4 white"></div>
<div class="red">
<a title="Structure of Ftsz:mciz Complex" class="graphSeq h4" href="#" style="width:379px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:33px;" class="h4 white"></div>
<div class="red">
<a title="Bacillus Subtilis Ftsz" class="graphSeq h4" href="#" style="width:379px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:8px;" class="h4 white"></div>
<div class="red">
<a title="Staphylococcus Aureus" class="graphSeq h4" href="#" style="width:405px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div class="red">
<a title="Homo sapiens chromosome 11" class="graphSeq h4" href="#" style="width:114px;"></a>
</div>
<div style="width:1px;" class="h6 black"></div>
<div class="purple">
<a title="Homo sapiens chromosome 11" class="graphSeq h4" href="#" style="width:174px;"></a>
</div>
<div style="width:1px;" class="h6 black"></div>
<div class="red">
<a title="Homo sapiens chromosome 11" class="graphSeq h4" href="#" style="width:2px;"></a>
</div>
<div style="width:1px;" class="h6 black"></div>
<div class="red">
<a title="Homo sapiens chromosome 11" class="graphSeq h4" href="#" style="width:207px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:7px;" class="h4 white"></div>
<div class="red">
<a title="Staphylococcal Aureus Complex" class="graphSeq h4" href="#" style="width:490px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:80px;" class="h4 white"></div>
<div class="green">
<a title="Structure of Luciferase Enzyme" class="graphSeq h4" href="#" style="width:86px;"></a>
</div>
<div style="width:81px;" class="h1 grey"></div>
<div class="green">
<a title="Structure of Luciferase Enzyme" class="graphSeq h4" href="#" style="width:86px;"></a>
</div>
<div style="width:80px;" class="h1 grey"></div>
<div class="green">
<a title="Structure of Luciferase Enzyme" class="graphSeq h4" href="#" style="width:86px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:7px;" class="h4 white"></div>
<div class="red">
<a title="Staphylococcus Aureus" class="graphSeq h4" href="#" style="width:490px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:8px;" class="h4 white"></div>
<div class="red">
<a title="Staphylococcus R29a Mutant" class="graphSeq h4" href="#" style="width:405px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:8px;" class="h4 white"></div>
<div class="red">
<a title="Staphylococcus Aureus Gdp-form" class="graphSeq h4" href="#" style="width:405px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:8px;" class="h4 white"></div>
<div class="red">
<a title="Staphylococcus Aureus Ftsz" class="graphSeq h4" href="#" style="width:405px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:33px;" class="h4 white"></div>
<div class="red">
<a title="S. aureus FtsZ GTP" class="graphSeq h4" href="#" style="width:380px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:33px;" class="h4 white"></div>
<div class="red">
<a title="S. aureus FtsZ F138A" class="graphSeq h4" href="#" style="width:380px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:7px;" class="h4 white">
</div><div class="red">
<a title="Staphylococcus Mutant" class="graphSeq h4" href="#" style="width:490px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:7px;" class="h4 white"></div>
<div class="red">
<a title="1 Angstrom Resolution Structure" class="graphSeq h4" href="#" style="width:415px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:7px;" class="h4 white"></div>
<div class="red">
<a title="S. aureus T7 Mutant" class="graphSeq h4" href="#" style="width:490px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:33px;" class="h4 white"></div>
<div class="red">
<a title="Staphylococcus Aureus semet" class="graphSeq h4" href="#" style="width:380px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:28px;" class="h4 white"></div>
<div class="red">
<a title="Structure of Sula:ftsz" class="graphSeq h4" href="#" style="width:384px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:28px;" class="h4 white"></div>
<div class="red">
<a title="Pseudomonas Aeruginosa Gdp" class="graphSeq h4" href="#" style="width:472px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:3px;" class="h4 white"></div>
<div class="red">
<a title="FtsZ, T7 mutated, T. maritima" class="graphSeq h4" href="#" style="width:409px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:11px;" class="h4 white"></div>
<div class="red">
<a title="FtsZ W319Y mutant" class="graphSeq h4" href="#" style="width:414px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:11px;" class="h4 white"></div>
<div class="red">
<a title="FtsZ GMPCPP soak I213" class="graphSeq h4" href="#" style="width:414px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:11px;" class="h4 white"></div>
<div class="red">
<a title="Cell-Division Protein" class="graphSeq h4" href="#" style="width:414px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:28px;" class="h4 white"></div>
<div class="red">
<a title="Aquifex Aeolicus Ftsz" class="graphSeq h4" href="#" style="width:401px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:17px;" class="h4 white"></div>
<div class="blue">
<a title="4-chlorobenzoyl-coa Ligase" class="graphSeq h4" href="#" style="width:104px;"></a>
</div>
<div style="width:62px;" class="h1 grey"></div>
<div class="blue">
<a title="4-chlorobenzoyl-coa Ligase" class="graphSeq h4" href="#" style="width:105px;"></a>
</div>
<div style="width:62px;" class="h1 grey"></div>
<div class="blue">
<a title="4-chlorobenzoyl-coa Ligase" class="graphSeq h4" href="#" style="width:104px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:45px;" class="h4 white"></div>
<div class="blue">
<a title="Methanosaeta Thermophila" class="graphSeq h4" href="#" style="width:419px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:49px;" class="h4 white"></div>
<div class="black">
<a title="Cetz2 Haloferax Volcanii" class="graphSeq h4" href="#" style="width:252px;"></a>
</div>
</div>
<div class="leftGr grpos">
<div style="width:13px;" class="h4 white"></div>
<div class="black">
<a title="Cetz1 Haloferax Volcanii" class="graphSeq h4" href="#" style="width:236px;"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS: style.css
body {
margin: 0;
padding: 0 0 10px;
color: #333;
font: 83%/1.5 arial, tahoma, verdana, sans-serif;
}
p { margin: 0 0 1.75em }
#graphic {
text-align: center;
margin: auto;
padding: 0 0 10px;
}
#clkey {
background-color: White;
border: 1px solid black;
padding-bottom: 1em;
width: 610px;
padding-right:1em;
}
.grQuery {
clear: left;
font-family: verdana;
font-size: 11px;
font-weight: bold;
height: 12px;
vertical-align: text-top;
background-color: #58c7c7;
color: black;
}
.grQuery.leftGr.masterLen > span {
display: inline-block;
margin-top: -4px;
}
.leftGr.grpos {
clear: left;
}
.leftGr {
margin-left: 70px;
}
.leftGr.grpos > img {
float: left;
}
.leftGr.grpos div {
margin-bottom: 5px;
}
.leftGr.grpos div {
float: left;
}
.grSpace, .grH, .h4 {
height: 4px;
}
.h6 {
height: 6px;
}
.h1 {
height: 1px;
}
.graphSeq {
display: inline-block;
}
.grey {
background-color: #808080;
margin-top: 2px;
}
.black {
background-color: Black;
margin-top: -1px;
}
.purple {
background-color:Fuchsia;
}
.white {
background-color:white;
}
.green {
background-color:lime;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.sdg {
float: none;
font-family: verdana;
font-size: 1.1em;
height: 13px;
margin-bottom: 1em;
margin-top: -7px;
padding-bottom: 1em;
width: 10px;
}
#df {
background-color: #ffffcc;
display: inline-block;
margin-bottom: 0.2em;
margin-left: -1.5em;
margin-top: -0.2em;
padding: 0 3px;
width: 326px;
}
#grBlastHits {
display:inline-block;
}
.scale {
width: 2px;
height: 10px;
background-color: black;
}
.clkey {
display: inline-block;
float: left;
font-family: verdana;
font-size: 13px;
margin-bottom: 0.5em;
width: 20%;
text-align: left;
}
.clKeyTl {
font-family: verdana;
font-weight: bold;
margin-bottom: 3px;
}
.masterLen {
width: 500px;
}
.ck {
display: inline-block;
height: 1em;
width: 1em;
}
.cl {
display: inline-block;
margin-left: 0.2em;
vertical-align: 2px;
}
Comments
Post a Comment